网站添加回到顶部功能
本站用的 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 元素上面，所以点击后就回到了顶部，读者可以滚动本站的页面试试效果。当然，每个网站代码结构不一样，理解原理后，自己可以自行添加此功能，本人非专业前端，这个实现不一定是最佳实践，但对于我来说够用了，分享的目的也是给非专业人员参考。
版权申明:
- 未标注来源的内容全部为原创，未经授权请勿转载（因转载后排版往往错乱、内容不可控、无法持续更新等）;
- 非营利为目的，演绎本博客任何内容，请以'原文出处'或者'参考链接'等方式给出本站相关网页地址(方便读者)。