一直没有添加 GoTop 回到顶部自动隐藏的 JS,只是简单固定在一个位置,有时候会挡住部分视线,尽管我的右下角几乎是没有可挡的内容。
今天趁着有空折腾,这里记录一下使用过程。
完整代码如下:
自己已经有 top 按钮代码和样式了,所以不用另外添加 html 和 css,第一句就用不着了,添加一个 id=gotop 即可了,另外如果有 id 完全可以修改自己的 id 或者修改 js 代码中最后一句的调用 id 名称。
为不影响自己的样式,直接添加了 id=”gotop”,然后清理缓存,就出效果了。
后来考虑到 footer 中放这么一堆代码比较乱,直接打包成一个 gotop.js 文件,直接调用就省事多了。
新建记事本,复制以上代码,简单修改后如下:
jQuery(document).ready(function($) { backTop = function(btnId) { var btn = document.getElementById(btnId); var d = document.documentElement; var b = document.body; window.onscroll = set; btn.onclick = function() { btn.style.display = "none"; window.onscroll = null; this.timer = setInterval(function() { d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set); }, 10); }; function set() { btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none" } }; backTop('gotop');});
之后保存为 gotop.js,直接调用就搞定了。代码如下:
把其中的 src 链接修改成自己的 js 链接即可。
测试没问题之后,百度搜 ,把之前的 JS 代码简单压缩一下,混淆就算了,覆盖原代码,保存完毕。
最后用到了 ,把自己的 JS 在这里加载,完美实现选择性页脚加载 JS 以及 JS 文件的统一管理。