js返回顶部案例详解（原生javascript）

一知识点

1,获取节点（如document.getElementById）

2,获取滚动条的高度(scrollTop）

3,设置文档的scrollTop

二实例代码

1，css

#btn{position:fixed;right:0;bottom:0;width:200px;height:50px;background:#ff0000;color:#fff;}

2,html

<div id="con">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
</div>
<div id="btn">返回顶部</div>

3,jsvascript

<script>

   window.onload=function(){
     var btn=document.getElementById('btn');
     var bSys=true;
     var timer=null;
     var con=document.getElementById('con');
     //检测用户是否拖动了滚动条
     window.onscroll=function(){
         if(!bSys){
             clearInterval(timer)
             }
           bSys=false;
         }
     //用户点击了返回顶部
     btn.onclick=function(){
          console.log("回到顶部")
          timer=setInterval(
            function(){
                //顶部距离
                 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                 var iSpeed=Math.floor(-scrollTop/8);
                 //如果滚动到了顶部，清除定时器
                 if(scrollTop==0){
                      clearInterval(timer)
                     }
                 bSys=true
                 document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
                
                },
            30
          
          )
         
         }
   }
</script>

三:注意事项

1，由于兼容性问题（scrollTop的获取方式不同），本案例用了document.documentElement.scrollTop||document.body.scrollTop;

2，如果不清除定时器，当用户点击了返回顶部后将无法滚动文档，因为定时器会一直运行而返回顶部

 3，如果在用户点击了返回顶部而滚动条未滚动到顶部这个时间段，滑动鼠标滚轮会没有效果（因为这段时间定时器还未清除）所以本案例用了window.onScroll=function(){}以便进行判断并清除定时器