返回頂部的按鈕設計

html:

<a href="javascript:;" id="btn" title="回到頂部"></a>

css:

#btn{position:fixed;display:none;}

script:

獲取滾動條高度:document.documentElement.scrollTop || document.body.scrollTop

獲取可視區高度:document.documentElement.clientHeight

window.onload = function(){
    var obtn = document.getElementById('btn');
    //獲取頁面可視區的高度
    var clientHeight = document.documentElement.clientHeight;
    var timer = null;
    var isTop = 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 (!isTop){
            clearInterval(timer);
        }
        isTop = false;
    };
    obtn.onclick = function(){        
        //設置定時器
        timer = setInterval(function(){
            //獲取滾動條距離頂部的高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            var ispeed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
            
            isTop = true;
            if (osTop === 0){
                clearInterval(timer);
            }
        },30);
    };
};