JS实现回到顶部功能

“回到顶部”这个功能诸多网页中可见，实现回到顶部这个功能时，总会不自觉哼成 “回到拉萨”，

回到拉萨，回到了布达拉，回到拉萨，回到了布达拉宫，在雅鲁藏布江把我的心洗清......

先写好HTML结构和CSS样式，为了实现回到顶部功能，就需要页面大于可视区，出现滚轮。并且贴上回到顶部图片，设置固定定位。

下面就是用JavaScript实现需求功能。

思路：

1、页面加载完毕后读取JS

2、获取回到顶部所在的的标签

3、绑定点击事件

4、点击按钮回到顶部，就需要获取当前位置距离顶部的距离scrollTop

5、设置scrollTop数值，做自减可以不断往上滚动

6、但所需要的效果是自动回到顶部，这就用到了动画效果，设置定时器setInterval()函数

7、如果距离顶部距离为0，则清除定时器clearInterval()

8、所需要的效果是从快到慢的速度回到顶部，第5步不做自减而是减去对距离顶部的距离做除法运算所得值

9、做除法带来的问题就是无法整除时就无法得到距离顶部距离为0，也就是无法真正回到顶部

10、回到顶部过程中点击页面触发暂停，用到onscroll事件

11、滚动到第二屏时才显示“回到顶部”功能，就需要获取可视区高度用到clientHeight

window.onload=function(){                                           //1var btn=document.getElementById("btn");                         //2var clientHeight=document.documentElement.clientHeight;         //11var timer=null;                                                 //6var istop=true;                                                 //10window.onscroll=function(){                                     //10var dtop=document.documentElement.scrollTop;                //11if(dtop >= clientHeight){btn.style.display="block";}else{btn.style.display="none";}if(!istop){                                                 //10clearInterval(timer);}istop=false;}btn.onclick=function(){                                         //3timer=setInterval(function(){                               //6var dtop=document.documentElement.scrollTop;            //4var speed=Math.floor(-dtop/10);                         //8document.documentElement.scrollTop = dtop+speed;        //5、document.documentElement.scrollTop -= dtop;//9istop=true;                                             //10if(dtop==0){                                            //7clearInterval(timer);}},30)   }

关注我吧

关注「前端一起学」公众号 ，让我们一起学前端，一起进步。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！