要求：當滑鼠從頂部滾動後，顯示返回頂部按鈕，點選按鈕，頁面平滑滾動到頂部，按鈕隱藏。

1.css

#scrollTop{
            position:fixed;
            bottom: 20px;
            right: 20px;
            height: 0px;
            width:  45px;
            line-height: 45px;
            text-align: center;
            background-color: rgba(0,0,0,.7);
            color
 
: #fff;
            font-weight: 600;
            border-radius: 45%;
            font-size: 13px;
            transition: .5s all;
}

2.js

<script type="text/javascript">
    var scrolltop = document.getElementById("scrollTop");
    scrolltop.onclick = function(){
        // alert("111");
        //
 
 document.scrollingElement.scrollTop = 0;
        //  window.scrollTo(0,0); 
            
        window.scrollTo({ top: 0, behavior: "smooth" });
    }
         
    window.onscroll = function(){
        var scrollTop1 = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        
 
if (scrollTop1> 0) {
            // scrolltop.style.width = 45 + 'px';
            scrolltop.style.height = 45 + 'px';
        } else {
            // scrolltop.style.width = 0 + 'px';
            scrolltop.style.height = 0 + 'px';
        }
     }      
</script>

解釋：

1.position : fixed; 以瀏覽器視窗絕對定位

2. 返回頂部方法

① document.scrollingElement.scrollTop = 0 ; //垂直滾動到頂部

② window.scrollTop(0,0) //垂直滾動到頂部

③ window.scrollTop(options);

top: 相當於y軸座標；

left: 相當於x軸座標；

behavior:型別string，表示滾動行為，支援smooth(平滑滾動),instant(瞬間滾動), 預設值是auto，等同於instant

window.scrollTo({ 
    top: 1000, 
    behavior: "smooth" 
});

3. 當滾動條滾動的距離大於零時，設定按鈕高度，否則高度為零（不顯示）

獲取scrollTop：

①各瀏覽器下 scrollTop的差異
IE6/7/8：
對於沒有doctype宣告的頁面裡可以使用 document.body.scrollTop 來獲取 scrollTop高度 ；
對於有doctype宣告的頁面則可以使用 document.documentElement.scrollTop；
Safari:
safari 比較特別，有自己獲取scrollTop的函式 ： window.pageYOffset ；
Firefox:
火狐等等相對標準些的瀏覽器就省心多了，直接用 document.documentElement.scrollTop ；
②完美獲取
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通過這句賦值就能在任何情況下獲得scrollTop 值。

window.pageYOffset (Safari) 被放置在 || 的中間位置。
因為當 數字0 與 undefine 進行 或運算時，系統預設返回最後一個值。即或運算中 0 || undefine ;返回的是underfine。
當頁面滾動條剛好在最頂端，即scrollTop值為 0 時。 IE 下 window.pageYOffset (Safari) 返回為 undefine ，此時將window.pageYOffset (Safari) 放在或運算最後面時， var scrollTop= 0 || 0 || undefine =underfine ,這樣用在接下去的運算就會報錯咯。
而其他瀏覽器 無論 scrollTop 賦值或運算順序如何都不會返回 undefine. 可以安全使用..
所以window.pageYOffset 要放中間 如下：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;