JS实现回到顶部功能

 

<div></div>
<span class="toTop">回到顶部</span>

 

div{
    height：3000px;
}
.toTop{
    display:none;
    position:fixed;
    right:0;
    bottom:20px;
}

window.onload=function(){
    var span=document.getElementsByClassName("toTop")[0];
    var timer=null;
    var returnTop=true;//当滚动条滚动触发滚动时，清除定时器
    //获取页面的可视窗口高度
    var clientHeight=document.documentElement.clientHeight || document.body.clientHeight;
    //滚动条滚动时触发
    window.onscroll=function(){
        var scroollTop=document.documentElement.scrollTop || document.body.scrollTop;
        if(scroollTop>clientHeight){
           span.style.display="block";
        }else{
           span.style.display="none";
        }
        if(!returnTop){
           clearInterval(timer);
        }
        returnTop=false;
    }
    span.onclick=function(){
        timer=setInterval(function(){
                var top=document.documentElement.scrollTop || document.body.scrollTop;
                var speed=Math.floor(-top/6);
                document.documentElement.scrollTop=document.body.scrollTop=top+speed;
                returnTop=true;
                if(top==0){
                    clearInterval(timer);
                }
            },100)
         document.onclick = function (e) {
             if (e.target.className != 'toTop') {
                 clearInterval(timer);
                 document.onclick = null;
             }
         }
    }
}