呼~為了想讓部落格中加入一個回到頁面頂端的按鈕,這小小一個功能,可真是搞了好大一番功夫,經歷了到處查資料,測試、修改,再測試、再修改,最後終於讓外觀跟功能效果都成功可以用了!

為了讓以後如果要修改時可以快速參考,做了這份筆記,也提供給有需要的人參考囉~

在部落格加入回到頂端功能-01.png
效果圖~點了之後可以自動回到頁面的最上方

要在痞客邦部落格中加入回到頁面最上面(頂端)的按鈕,首先準備好按鈕的圖檔~

在部落格加入回到頂端功能-02.png

如果只有一種狀態(平常的狀態跟滑鼠移上去都一樣不會變),就只需要一個圖檔;但如果想要在滑鼠移上時換個樣子,就需要多一張圖檔囉。

 

延伸補充

在做圖檔的時候,想要快速的插入漂亮的符號或圖示(icon),又不用擔心著作權的問題,可以使用「Font Awesome」這套完全免費的開放原始碼字型喔!

在部落格加入回到頂端功能-03.png

裡面的圖示不但畫的精美,而且種類非常豐富,以目前來說就有將近 700 個 icon 可以任意自由使用(而且還會不斷增加),真的是超棒的!

點開喜歡的 icon 後,就會看到使用這個 icon 的相關資訊-這個圖示的 Unicode(萬國碼)編碼,例如下圖中,編碼就是「f164」。

在部落格加入回到頂端功能-04.png

 

接著再到 Photoshop 等影像處理軟體來輸入文字:

1 切換到中文輸入法(如微軟新注音)
2 依序按下【`(數字1左邊的按鍵)】→【u】→【f164(icon 的 Unicode編碼)】→【Enter】
3 再套用字型「Font Awesome」,就完成了!

在部落格加入回到頂端功能-05.png

小提示:這個方法換到 Word、PowerPoint 等軟體通通適用喔~

 

圖檔好了之後,回到痞客邦後台樣式管理的「CSS原始碼」中,加入以下程式碼:

2017/2/3更新:後來發現痞客邦內建就有一個「.back-to-top」的 class,直接用內建的可以讓跑的速度更順暢,故修改以下程式碼。

.back-to-top { /* 自訂top按鈕 */
	display: none; /* 一開始不顯示 */
	position: fixed; /* 固定在畫面右下角 */
	right: 20px;
	bottom: 20px;
	height: 64px; /* 圖檔高度 */
	width: 64px; /* 圖檔寬度 */
	background: url("圖檔路徑") no-repeat;
	opacity:0.8; /* 透明度80% */
	cursor: pointer; /* 滑鼠游標變成手指效果 */
}

.back-to-top a { /* 痞客邦內建的top連結*/
	height: 64px; /* 展開連結區域為和按鈕圖示一樣的大小 */
	width: 64px;
	display: block; /* 設定為區塊元素 */
	font-size: 0px; /* 隱藏預設的top文字*/
}

.back-to-top:hover {	/* 當滑鼠移上時的效果 */
	background: url("圖檔路徑") no-repeat;
}

小提示:「圖檔路徑」記得要改成自己的按鈕圖檔網址喔!

 

再到「側欄管理」,新增一個版位(或是隨意找一個已經開起來的自訂版位,但在版位排序上越上面的越好,才能在部落格一載入時就有讀到),並加入以下程式碼:

2017/2/3更新:使用痞客邦內建的「.back-to-top」,修改程式碼如下。

<!-- 先引入Google的jquery函式庫 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- 效果設定:在滑鼠滾動之後才會出現 -->
<script type="text/javascript">	
	$(window).scroll(function() { 
		if ( $(this).scrollTop() > 300){
			$('.back-to-top').fadeIn("normal");
			/* 當滑鼠滾過300px後,用normal的速度淡入出現 */
		} else {
			$('.back-to-top').stop().fadeOut("normal");
			/* 當滑鼠滾回頁面頂端,用normal的速度淡出消失 */
		}
	});
</script>

<!-- 呼叫top按鈕 -->
<div class=".back-to-top"> </div>

這樣就完成了~~~!

※ 本教學的程式碼都是由騏騏自己寫出來的,若要使用,煩請在下面留個言,給我一點鼓勵~

創作者介紹

chi0*: 騏格子

騏騏 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • 咻咻
  • 看到箭頭了:D
    騏騏有些文章內容資訊量多, 有這個就方便多了~[:emotion1484661367-2901662720_s.png]
  • 對呀~我有些筆記文章也是會反覆查閱,就是因為覺得還要自己滑鼠上下滾很累,所以決定要把這個功能做出來~~ ^v^///

    騏騏 於 2017/01/31 13:21 回覆

  • jerry886
  • 你好 我試著你的方法可是弄不太起來 怎辦@@
  • 如果可以的話,請告訴我更多你設定的方式跟資訊,好讓我有辦法幫你一起找找問題可能出在哪邊喔...

    騏騏 於 2017/06/21 10:57 回覆

找更多相關文章與討論