网页返回顶部按钮js实现

Posted 2021-01-30 cpl9412290130

自建的博客，之前迟迟未能去将页面返回顶部按钮功能给完善，今天在写博客比较长时，下拉后往回返回时，好费事，要么点住浏览器的右边框慢慢拉上去，要么就鼠标拨轮一点点往回拨。鉴于本人对js不熟，虽然在各位大佬看来可能很小儿科，但是我还是贴上来留个记录，供自己学习。

HTML部分：

1 <!--返回顶部-->
2 <div class="fixed-top">
3     <a id="btn_top" class="gotop" title="返回顶部"></a>
4 </div>

CSS部分：

 1 div.fixed-top {
 2     padding: 0;
 3     background-color: #ffffff;
 4 }
 5 div.fixed-top a.gotop {
 6     background: url("/static/totop.png") no-repeat center center;
 7     width: 46px;
 8     height: 46px;
 9     border-radius: 50%;
10     position: fixed;
11     right: 25px;
12     bottom: 25px;
13     -webkit-transition: all .2s ease-in-out;
14     cursor: pointer;
15     background-color: #ffffff;
16     color: #fff;
17     z-index: 99998;
18 }

JavaScript部分：

 1 // ===================返回顶部js代码======================
 2 // onload事件
 3 window.onload = function () {
 4     // 获取id元素
 5     var obtn = document.getElementById("btn_top");
 6     var isTop = true;
 7     var timer = null;
 8     // 获取页面可视高度
 9     var clientHeight = document.documentElement.clientHeight||document.body.clientHeight;
10 
11     // onscroll滚动条滚动时触发
12     window.onscroll = function () {
13         // 在滚动的时候添加判断
14         var topH = document.documentElement.scrollTop||document.body.scrollTop;
15         if(topH > clientHeight) {
16             obtn.style.display = "block";
17         }else {
18             obtn.style.display = "none";
19         }
20     }
21 
22     // 按钮点击时触发
23     obtn.onclick = function () {
24         // 设置定时器：setInternal会不停地调用函数，直到clearInterval被调用或者窗口被关闭
25         timer = setInterval(function () {
26             // 获取滚动条距离顶部的高度
27             var topH = document.documentElement.scrollTop||document.body.scrollTop;
28             // 设置滚动速度，使用Math的ceil，对数进行上舍入
29             var stepLength = Math.ceil(topH/6);
30             document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;
31             isTop = true;
32             // 判断滚动条是否为0，并触发clearInterval函数，结束setInternal作用
33             if(topH == 0) {
34                 clearInterval(timer);
35             }
36         }, 30);
37     }
38 }

到这里，还要小结一下，在中间我们运用的知识点：

知识点回顾：
 
DOM：
    1、document.getElementById()
    2、document.documentElement.scrollTop
    3、document.body.scrollTop
事件：
    1、window.onload
    2、window.onscroll
    3、obtn.onclick
定时器的使用：
    1、setInterval(function(){},30)
    2、clearInterval(timer)