Top

2019年7月20日 星期六

Blogger小工具|Scroll Top 按鈕

  要加一個回到頂端的懸浮按鈕對於一般沒碰過 JS 程式碼的 Blogger 用戶可說是難如登天,尤其 Blogger 的 "小工具" 裡又沒這個預設功能時,很多用戶是直接忽略這個造成觀眾體驗不佳的小問題,會說鍵盤就有 "Home" 鍵跟 "End" 鍵了,按一下要到頂端或到底端很輕鬆阿?但這對行動裝置的觀眾就不是這麼輕鬆了,一般行動裝置可沒這麼方便的按鈕可用,所以觀眾閱讀完一篇文章後只能一直快速滑動手指回到頂端,或是乾脆跳出去離開這網頁💀

  應該有人注意到在下最近加了一顆 "Top" 的懸浮按鈕在頁面右下角,這按鈕會在觀眾往下滑到一定程度時出現,當然加這功能時在下意外發現了一個網站有提供現成的 JS 程式碼可以使用, 而剛好 Blogger 的 "小工具" 裡就有「HTML/JavaScript新增」(將第三方功能或其他程式碼加入您的網誌) 的小工具可以用,下面用圖來講解示範「如何複製貼上就加好一個回到頂端的懸浮按鈕!」

  首先,到 Free Scroll to Top Buttons 這個網頁挑選你喜歡的回到頂端按鈕。

     接著來到後台照圖的順序點擊準備新增一個小工具。

     然後點擊新增「HTML/JavaScript」的小工具。

     接著把剛剛打開的「Free Scroll to Top Buttons」頁面上你想要用的按鈕旁的程式碼全部複製貼上去。

     按儲存後就會多一個你自訂的「HTML/JavaScript」小工具。

     最後回到頁面上就會發現捲動到一定程度後你選擇的按鈕自動出現了,這就是一般人也可以輕鬆複製貼上就加好 "回到頂端的懸浮按鈕" !

  喔,順道一提,在下網頁上的可不是用那網站的程式碼,是在下自己刻出來的。畢竟大小跟位置不太合在下的意,加上看過他的程式碼覺得根本殺雞用牛刀,不用那麼複雜,所以就直接用 CSS 加上簡單的 JS Script 搞定這玩意😎

沒有留言:

張貼留言