“回到頂部”這個功能諸多網頁中可見，實現回到頂部這個功能時，總會不自覺哼成 “回到拉薩”，

回到拉薩，回到了布達拉，回到拉薩，回到了布達拉宮，在雅魯藏布江把我的心洗清......

 先寫好HTML結構和CSS樣式，為了實現回到頂部功能，就需要頁面大於可視區，出現滾輪。並且貼上回到頂部圖片，設定固定定位。

下面就是用JavaScript實現需求功能。

思路：

1、頁面載入完畢後讀取JS

2、獲取回到頂部所在的的標籤

3、繫結點選事件

4、點選按鈕回到頂部，就需要獲取當前位置距離頂部的距離scrollTop

5、設定scrollTop數值，做自減可以不斷往上滾動

6、但所需要的效果是自動回到頂部，這就用到了動畫效果，設定定時器setInterval()函式

7、如果距離頂部距離為0，則清除定時器clearInterval()

8、所需要的效果是從快到慢的速度回到頂部，第5步不做自減而是減去對距離頂部的距離做除法運算所得值

9、做除法帶來的問題就是無法整除時就無法得到距離頂部距離為0，也就是無法真正回到頂部

10、回到頂部過程中點選頁面觸發暫停，用到onscroll事件

11、滾動到第二屏時才顯示“回到頂部”功能，就需要獲取可視區高度用到clientHeight

window.onload=function(){                                           //1
    var btn=document.getElementById("btn");                         //2

    var clientHeight=document.documentElement.clientHeight;         //11

    var timer=null;                                                 //6

    var istop=true;                                                 //10

    window.onscroll=function(){                                     //10

        var dtop=document.documentElement.scrollTop;                //11
        if(dtop >= clientHeight){
            btn.style.display="block";
        }else{
            btn.style.display="none";
        }

        if(!istop){                                                 //10
            clearInterval(timer);
        }
        istop=false;
    }

    btn.onclick=function(){                                         //3

        timer=setInterval(function(){                               //6

            var dtop=document.documentElement.scrollTop;            //4

            var speed=Math.floor(-dtop/10);                         //8

            document.documentElement.scrollTop = dtop+speed;        //5、document.documentElement.scrollTop -= dtop;
                                                                    //9
            istop=true;                                             //10

            if(dtop==0){                                            //7
                clearInterval(timer);
            }
        },30)   
    }