回到頂部按鈕練習

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