JS_回到顶部按钮的实现
很多页面都有一个回到顶部的按钮,一旦点击页面的scrollbar就会变为0
只需要document.body.scrollTop = document.documentElement.scrollTop = 0,在这个基础上在加一个缓动公式。
下面贴上我的代码
html:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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="返回顶部↑">
css:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
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 }
效果展示:(移动滚动条后,右下角有个回到顶部的按钮)
以上内容,如有错误请指出,不甚感激。