Back Top （回到顶部）JS实现

button

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

style

<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>

原生js

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;
        }
    }
}

常见控件效果实现

控件效果实现