js实现回到顶部

 //返回顶部
    //获取返回顶部元素
    var backtop = document.getElementById('backtop');
    var timer = null ;
    var isTop = true;
    //获取页面可视高度
    var clientHeight = document.documentElement.clientHeight;
    
   
    window.onscroll = function() {
        //当滚动条滑至第二屏显示元素,否则隐藏
        var topHeight = document.body.scrollTop || document.documentElement.scrollTop;
        if(topHeight >= clientHeight){
            backtop.style.display = 'block';
        }else{
            backtop.style.display = 'none';
        }
        //当用户在返回顶部的中途滑动滚动条使其停止
        if(!isTop){
            clearInterval(timer);
        }
        isTop = false;
    }
    
    //点击返回顶部,设置定时器,以及向上滑动的速度
    backtop.onclick = function() {
        timer = setInterval(function(){
            var topHeight = document.body.scrollTop || document.documentElement.scrollTop;
            var upspeed = Math.floor(-topHeight / 5);
            document.documentElement.scrollTop = document.body.scrollTop = topHeight + upspeed;  
            isTop = true;
            if(topHeight == 0){
                clearInterval(timer);
            }
        }, 30);
    }
	


    

参考图片:

回到顶部图片

你可能感兴趣的:(js实现回到顶部)