企业网站模板

网页回到顶部 GoTop 按钮自动隐藏

作者 2021-10-12 81

一直没有添加 GoTop 回到顶部自动隐藏的 JS,只是简单固定在一个位置,有时候会挡住部分视线,尽管我的右下角几乎是没有可挡的内容。

今天趁着有空折腾,这里记录一下使用过程。

完整代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div style="display: block;" id="gotop"></div>
<script type="text/javascript">
    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');
</script>

自己已经有 top 按钮代码和样式了,所以不用另外添加 html 和 css,第一句就用不着了,添加一个 id=gotop 即可了,另外如果有 id 完全可以修改自己的 id 或者修改 js 代码中最后一句的调用 id 名称。

为不影响自己的样式,直接添加了 id=”gotop”,然后清理缓存,就出效果了。

后来考虑到 footer 中放这么一堆代码比较乱,直接打包成一个 gotop.js 文件,直接调用就省事多了。

新建记事本,复制以上代码,简单修改后如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 代码简单压缩一下,混淆就算了,覆盖原代码,保存完毕。

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!

发表评论

好哇网,累计帮助1000+用户成功建站,为小微企业提供助力!

立刻开启你的建站之旅

留言咨询

现在加入好哇网,注册一个账号