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

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

在部落格加入回到頂端功能-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 留言(6) 人氣()


留言列表 (6)

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

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

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

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

  • imvulvup
  • 您好~~謝謝您分享此作法!!
    有幾個問題想請教您~
    在製作圖檔時,有安裝字型,但打了字碼就是無法變成圖案耶~~
    這可能是什麼原因呢?

    另外,如果使用的是PIXNET版型,要怎麼找到可以加入此圖標的地方(CSS)?
    因為其實看不太董CSS.....

    謝謝!!!
  • 打字碼之後,如果沒有顯示出來(打好了卻是空白的),可以再確認一下字體「Font Awesome」有沒有跳掉(可能會跳成預設的標楷體或新細明體什麼的)。

    要加入圖標的地方,就是上面說的「.back-to-top」、「.back-to-top a」跟「.back-to-top:hover」囉!

    請問可以把您的留言公開嗎?以供其他讀者也可以參考,謝謝 :)

    騏騏 於 2017/10/19 16:35 回覆

  • imvulvup
  • 我看一下我使用的版型的CSS,找到以下:
    .back-to-top a {
    color: #aaa;
    text-decoration: underline;
    }

    跟妳的長不一樣~~~
  • 你現在版型中的CSS,表示只有設定回到頂端(.back-to-top)的超連結(a)樣式,文字顏色是「#aaa」,裝飾方式是「底線」,其他狀況則都沒有設定。

    所以你可以直接把你找到的這一段,直接用本文中的「.back-to-top」、「.back-to-top a」跟「.back-to-top:hover」整個覆蓋過去~

    請問可以把您的留言公開嗎?以供其他讀者也可以參考,謝謝 :)

    騏騏 於 2017/10/19 16:38 回覆

  • imvulvup
  • 可以公開~謝謝!

  • d(`・∀・)b

    騏騏 於 2017/10/19 20:03 回覆

  • imvulvup
  • 不好意思~再請問
    整串貼過去之後,再把"/* 圖檔高度 */"這些中文字刪除是嗎?
  • 有「/*」開頭、「*/」結尾,表示這是「註解」,是用來說明程式碼的。簡單來說,是給你我這些人類看比較好懂的 :)

    刪除或不刪除,電腦都可以正常執行。只是刪除了之後,你之後想修改,就要再想一下這個代表什麼意思囉。

    騏騏 於 2017/10/19 20:06 回覆

找更多相關文章與討論