原生js实现使滚动条缓慢回到顶部的效果

Posted 2020-09-13 yaomengli

html 部分 （因为a标签有链接功能，此时最好不要用a包裹 否则影响实现效果）

<li id="btn-top">回到顶部</li>

js部分

var top=document.getElementById("btn-top");
   var bottom=document.getElementById("btn-top");
   top.onclick=function(){
       //alert(11);
       timer=setInterval(function(){
           var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
           var ispeed=Math.floor(-scrollTop/6);
           console.log(ispeed)
           if(scrollTop==0){
               clearInterval(timer);
           }
           document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;
       },30)
   };