js爬樓效果實現

1.效果描述：
通過點擊“回到頂部”頁面由快到慢的滾動到頂部，而不是瞬間滾動到頂部

2. 效果js代碼

function sctop() {
    return document.body.scrollTop||
    document.documentElement.scrollTop||window.pageYOffset||0;
}
function scollToTop(btn){
    btn.onclick = function (event) {
        var e =  event||window.event;
        if(toTopInterval==null){
            var current = sctop();//獲取當前位置距離頂部的距離
            toTopInterval = setInterval(function () {
                current =current - Math.ceil(current/10);
                window.scrollTo(0,current);
                if(Math.round(current)==0){
                    clearInterval(toTopInterval);
                    toTopInterval=null;
                }
            },10);
        }
    }
}

3. 出錯點

（1）取整出錯

current =current - Math.ceil(current/10);

　　此處注意區別三個js取整函數

• Math.ceil(5/2)　 Math.ceil(0.９/2)　——值爲　３ 和 1
• Math.round(5/2)　Math.round(0.9/2)——值爲　３和0
• Math.floor(5/2) Math.floor(0.9/2)　——值爲　２和0

當下麪條件成立時，我們才 clearInterval()

 if(Math.round(current)==0){
                    clearInterval(toTopInterval);
                    toTopInterval=null;
                }

當current=9或4的時候，若果我們取整方法不是Math.ceil，那麼Interval將陷入死循環，html也將會出現閃動