javascript--返回顶部效果

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.判断用户是否触发了滚动事件。
相关文章
相关标签/搜索