JS_回到顶部按钮的实现

很多页面都有一个回到顶部的按钮，一旦点击页面的scrollbar就会变为0

只需要document.body.scrollTop = document.documentElement.scrollTop = 0,在这个基础上在加一个缓动公式。

下面贴上我的代码

 

html:

1 <div class="content">
2         我是顶部<br><br>
3         我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>
4     </div>
5     <input type="button" id="toTop" class="toTop" value="返回顶部↑">
html代码

css:

 1 .content{
 2     height: 3000px;
 3     font-size: 17px;
 4 }
 5 .toTop{
 6     width:160px;
 7     height: 30px;
 8     position: fixed;
 9     right: 20px;
10     bottom: 20px;
11     font-size: 20px;
12     font-family: "微软雅黑";
13     font-weight: bold;
14     letter-spacing: 5px;
15     display: none;
16 }
css代码

js代码

 1 window.addEventListener("load",function(){
 2 
 3     var toTop = document.getElementById("toTop");
 4     var posY = 0;
 5 
 6     window.addEventListener("scroll",function(){
 7         posY = window.pageYOffset || document.documentElement.scrollTop;
 8 
 9         if(posY == 0){
10             toTop.style.display = "none";
11         }else{
12             toTop.style.display = "block"
13         }
14     })
15 
16     toTop.addEventListener("click",function(){
17             var des = 0;
18             var start = posY;
19 
20             moveSlowly(start,des);
21     })
22 
23 })
24 
25 var timer = null;
26 function moveSlowly(start,des,time){
27     clearInterval(timer);
28     var speedTime = time || 100;
29     var distance = des - start;
30     var speed = distance/speedTime;
31     var pos = start;
32     var i = 1;
33 
34     timer = setInterval(function(){
35 
36         if(i == speedTime){
37             document.documentElement.scrollTop = document.body.scrollTop = des;
38             clearInterval(timer);
39         }else{
40             pos = pos + speed;
41             document.documentElement.scrollTop = document.body.scrollTop = pos;
42             i++;
43         }
44 
45     },1)
46 }

效果展示：（移动滚动条后，右下角有个回到顶部的按钮）

 

 

 

 

以上内容，如有错误请指出，不甚感激。

posted @ 2016-09-20 19:43  FIONA-SUN  阅读(990)  评论(0)  编辑  收藏  举报