回到顶部按钮练习

css

        *{margin: 0;padding: 0;}
        /* 显示区域 */
        #content{height: 4800px;width: 800px;border: 1px solid #333;margin: 0 auto;position: relative;background: url("../img/1.jpg");}
        /* 回到顶部的按钮 */
        #backTop{position: absolute;right: -50px;top: 500px;height: 50px;width: 40px;border: 1px solid #333;text-align: center;line-height: 50px;cursor: pointer;display: none;}

html

    <div id="content">
        <div id="backTop">顶部</div>
    </div>

javascript

    var backTop = document.getElementById('backTop');
    var scrollTimer;
    var flag = true;
    document.onscroll = function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//兼容chrome浏览器
        backTop.style.top = scrollTop + 500 + 'px';
        if(scrollTop < 600){
            backTop.style.display = 'none';//如果滚动条距离顶部小于600，就让按钮消失
        }else if(scrollTop >= 600){
            backTop.style.display = 'block';
        }
        //为了提高可用性，回到顶部按钮触发中间的时候,滚轮操作函数也将会被触发，用户如果有滚轮操作，则我们可以尝试停下定时器。
        if(!flag){
            clearInterval(scrollTimer);
        }
        flag = false;
    }
    //回到顶部按钮的函数
    backTop.onclick = function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var speed = scrollTop / 10;//将回到顶部的速度设定成滚动条距离顶部的距离的十分之一，
        scrollTimer = setInterval(function(){
            scrollTop = scrollTop - speed;
            document.documentElement.scrollTop = document.body.scrollTop = scrollTop;//让页面回到顶部
            if(scrollTop < 0){
                document.documentElement.scrollTop = 0;
                clearInterval(scrollTimer);//如果滚动条距离顶部的距离小于0则设置成0，并且停止定时器。
            }
            flag = true;
        },20)
    }