Elfachiy Kaur

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

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

效果圖～點了之後可以自動回到頁面的最上方

要在痞客邦部落格中加入回到頁面最上面（頂端）的按鈕，首先準備好按鈕的圖檔～

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

 

延伸補充～

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

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

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

 

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

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

小提示：這個方法換到 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>

這樣就完成了～～～！

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