JS實現回到頁面頂部動畫效果 2016.03.23

最近在模仿各大網站寫頁面樣式和交互，發現好多都有回到頂部的須要，因此寫了一下js，記錄下來。
發現還能夠添加從快到慢的動畫效果和隨時下拉滾動條中止滾動的功能， 參考了imooc上相關課程，最終實現JS代碼以下：

//頁面加載後觸發
window.onload = function(){
    var btn = document.getElementById('btn');
    var timer = null;
    var isTop = true;
    //獲取頁面可視區高度
    var clientHeight = document.documentElement.clientHeight;

    
    //滾動條滾動時觸發
    window.onscroll = function() {
    //顯示回到頂部按鈕
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (osTop >= clientHeight) {
            btn.style.display = "block";
        } else {
            btn.style.display = "none";
        };
    //回到頂部過程當中用戶滾動滾動條，中止定時器
        if (!isTop) {
            clearInterval(timer);
        };
        isTop = false;

    };

    btn.onclick = function() {
        //設置定時器
        timer = setInterval(function(){
            //獲取滾動條距離頂部高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            var ispeed = Math.floor(-osTop / 7);
            
            document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
            //到達頂部，清除定時器
            if (osTop == 0) {
                clearInterval(timer);
            };
            isTop = true;
            
        },30);
    };
};