javascript--返回顶部效果

Posted 2020-10-03

window.onload = function(){
    var obtn = document.getElementById(‘btn‘);
    //客户端页面可视区高度
    var clientHeight = document.documentElement.clientHeight;
    var timer = null;
    var isStop = true;
    //判断在浏览器触发回到顶部时，用户是否滚动滚轮
    window.onscroll = function(){
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(osTop >= clientHeight){
            obtn.style.display = ‘block‘;
        }else{
            obtn.style.display = ‘none‘;
        }
        if(!isStop){
            clearInterval(timer);
        }
        isStop = false;
    }
    obtn.onclick = function(){        
        //定时器
        timer = setInterval(function(){
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            var ispeed = Math.floor(-osTop / 6);
            isStop = true;
            document.documentElement.scrooTop = document.body.scrollTop = osTop + ispeed;
            if(osTop == 0){
                clearInterval(timer);
            }
        },30);
    }
}

//知识点
1.获取元素，添加事件
2.根据可视区域高度，判断元素显隐
3.获取滚动条高度，设置定时器，通过一个表达式设置可变的滚动速度，模拟先快后慢的效果
4.清除定时器的时机，1.滚动条高度为0；2.判断用户是否触发了滚动事件。