window.onload = function(){
    var obtn = document.getElementById(‘btn‘);
    //客戶端頁面可視區高度
    var clientHeight = document.documentElement.clientHeight;
    var timer = null;
    var isStop = 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(!isStop){
            clearInterval(timer);
        }
        isStop = false;
    }
    obtn.onclick = function(){        
        //定時器
        timer = setInterval(function(){
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            var ispeed = Math.floor(-osTop / 6);
            isStop = true;
            document.documentElement.scrooTop = document.body.scrollTop = osTop + ispeed;
            if(osTop == 0){
                clearInterval(timer);
            }
        },30);
    }
}

//知識點
1.獲取元素，添加事件
2.根據可視區域高度，判斷元素顯隱
3.獲取滾動條高度，設置定時器，通過一個表達式設置可變的滾動速度，模擬先快後慢的效果
4.清除定時器的時機，1.滾動條高度為0；2.判斷用戶是否觸發了滾動事件。

javascript--返回頂部效果