網站添加回到頂部功能
本站用的 hugo clarity 皮膚自帶一個回到頂部功能，圖標不滿意，我給改成了現在的樣子，易於識別。‘回到首頁’圖標一直展示，有點礙事。所以需要優化下，使其默認不顯示，只有當滾動條向下滾動一定距離後，超過這個閾值，顯示“回到頂部”圖標，不超過隱藏。
實現邏輯簡單易懂，整個改動如下圖所示：
下面解釋下變動
1. 給圖標所在元素添加個 id
添加 id 的目的是便於後續操作，控制圖標是否顯示。變化如下：
1diff --git a/layouts/partials/top.html b/layouts/partials/top.html
2index bdaa538..33aade0 100644
3--- a/layouts/partials/top.html
4+++ b/layouts/partials/top.html
5@@ -1,3 +1,3 @@
6-<a class="to_top" id="toTop" href="#documentTop">
7- <img src="/icons/to-top.svg" width="44" height="44" alt="to-top" />
8-</a>
9+<a class="to_top" href="#documentTop">
10+ <img src="/icons/to-top.svg" width="44" height="44" alt="to-top">
11+</a>
12\ No newline at end of file
差別是 <a> 標籤添加了個 id="toTop"
2. 設置默認隱藏圖標
1diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
2index 8a2c398..301844a 100644
3--- a/assets/sass/_components.sass
4+++ b/assets/sass/_components.sass
5@@ -546,7 +546,6 @@ figcaption
6
7 .to
8 &_top
9- visibility: hidden
10 background-color: transparent
11 width: 2.75rem
12 height: 2.75rem
13(END)
to_top 屬性添加了 visibility: hidden，意思就是默認隱藏，其實元素還是在的，性能好(來回滾動時，不用頻繁創建/刪除)，仍然會影響佈局。
3. 添加控制邏輯
1diff --git a/assets/js/custom.js b/assets/js/custom.js
2index 54f7fe3..11b1d82 100644
3--- a/assets/js/custom.js
4+++ b/assets/js/custom.js
5@@ -1,11 +1 @@
6-// add custom js in this file
7-
8-window.onscroll = function () {
9- var pageOffset =
10- document.documentElement.scrollTop || document.body.scrollTop;
11- if (pageOffset > 1000) {
12- document.getElementById("toTop").style.visibility = "visible";
13- } else {
14- document.getElementById("toTop").style.visibility = "hidden";
15- }
16-};
17+// add custom js in this file
18\ No newline at end of file
19(END)
這個皮膚的自定義 js 代碼放在 custom.js 中，原本是空的。上面代碼的意思，滾動時執行函數里面的代碼，如果垂直方向偏離頂部的偏移量(上卷隱藏了多少)大於 1000 像素(pixels)，設置 id 爲 toTop 的元素可見，否則隱藏。效果就是往下滾動一段距離，圖標顯示，反之不顯示。
scrollTop 的英文解釋：
An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0.
還不理解的話，看這個 stackoverflow 回答。
最後，由於頁面錨點“documentTop” 在 body 元素上面，所以點擊後就回到了頂部，讀者可以滾動本站的頁面試試效果。當然，每個網站代碼結構不一樣，理解原理後，自己可以自行添加此功能，本人非專業前端，這個實現不一定是最佳實踐，但對於我來說夠用了，分享的目的也是給非專業人員參考。
版權申明:
- 未標註來源的內容皆為原創，未經授權請勿轉載（因轉載後排版往往錯亂、內容不可控、無法持續更新等）;
- 非營利為目的，演繹本博客任何內容，請以'原文出處'或者'參考鏈接'等方式給出本站相關網頁地址(方便讀者)。