jquery：點擊回到頂部以及定點滾動

一、思路

DOM的每一個標籤以及瀏覽器自己都有一個scrollTop屬性，這不是CSS能夠控制的（目前），這個值指的是在一個指定的容器內當前可視頂部距離內容頂部的距離，若是這個容器是瀏覽器的話，那麼滾動條的上邊距就是這個值。

那麼，若是想要回到頂部的話，設置scrollTop的值爲0便可，滾動到指定位置也能夠設置這個值爲指定的數值。

設置scrollTop爲0：

1. $(window).scrollTop(0);

設置scrollTop爲指定數值：

1. var T=200;//這個是number類型，不須要帶px
2. $(window).scrollTop(T);

 二、方法

如1設置的話，瀏覽器會在瞬間改變滾動條的位置，沒有滾動的效果。若是要滾動的話，咱們就須要慢慢的改變scrollTop的值就好。那麼如何來作呢？

依照上面的經驗，咱們可能這麼寫：

1. var T=$(window).scrollTop();
2. var t=setInterval(function()
3. {
4. if(T==0)
5. {
6. clearInterval(t);
7. }
8. else
9. {
10. T-=10;
11. $(window).scrollTop(T);
12. }
13. },10);

這麼寫，徹底沒有錯誤，把設置爲固定值，就能夠定點滾動了。這個例子裏寫的是勻速滾動，固然若是爲了效果好，你能夠修改下T值的變更狀況，使之成爲變減速運動。

有沒有更好的辦法來簡化這個過程呢？咱們知道，jQuery的animation是很是著名的，能夠把這個運動放在animate裏來執行呢？答案是確定的：

1. $(document.body).animate({'scrollTop':0},1000);

經過閱讀animate的API知道，animate的其中兩個參數爲屬性和時間（如上代碼），其中屬性是這麼描述的「An object of CSS properties and values that the animation will move toward.」（參考：http://api.jquery.com/animate/），意思指的是對象的css屬性和值。但咱們從第一點就知 道，scrollTop並非一個css屬性，這又做如何解釋呢？

能夠解釋的是，animate的第一個參數包括的不單單是CSS，它涵蓋了全部能夠用數值來表示的window屬性值（scrollTop、scrollLeft）以及dom的CSS屬性值（width、top、margin-left）。

【完】