Back Top ①（回到顶部）原生JS实现

    <a href="javaScript:void(0);" id="btn"></a>
    
      
    
    代码解释

    <style>
        #btn {
            display: none;
            width: 40px;
            height: 40px;
            position: fixed;
            right: 50px;
            bottom: 30px;
            background: url("../images/back_top.png") no-repeat left top ;
    
        }
        #btn:hover{
            background:url("../images/back_top.png") no-repeat left -40px;
        }
    </style>
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解释

    window.onload=function(){
       var obtn= document.getElementById("btn");
    //文档高度
    var clientHeight=document.documentElement.clientHeight;
    var time=null;
    var isTop=true,
        cancelScroll = false;
    
    window.onscroll = function(){
    
        var osTop=document.documentElement.scrollTop||document.body.scrollTop;
        if(osTop>=clientHeight){
            obtn.style.display='block';
        }else{
            obtn.style.display='none';
        }
        if(!isTop){
            clearInterval(time);
        }
        isTop=false;
    }
    
    obtn.onclick=function(){
        //点击事件
        if(cancelScroll == false) {
            time=setInterval(function(){
                var osTop=document.documentElement.scrollTop||document.body.scrollTop;
                var ispeed=Math.floor(-osTop/10);
                document.documentElement.scrollTop=document.body.scrollTop=osTop+ispeed;
                isTop=true;
                if(osTop==0){
                    clearInterval(time);
                }
            },30);
        }else {
            clearInterval(time);
            cancelScroll = true;
        }
    }
    }
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解释