很多網頁在下方都會放置一個“返回頂部”按鈕，尤其是頁面底部沒有導航的網頁，這樣可以幫助訪客重新找到導航或者重溫一遍廣告（想得真美）。隨著近幾年來 JavaScript 的應用日漸廣泛，滑動效果無處不在，于是我也跟跟風，將返回頂部功能做成了滑動效果。后來為了更貼合物理特征， 改造做成了減速的滑動效果。
首先說一下原理吧，我們會獲取滾動條到頁面頂部的距離，然后上移一定的距離；再獲取滾動條到頁面頂部的距離，上移一定的距離（比上一次小一點）;以此類推 ...
先上代碼吧：
01 | <script type="text/javascript"> |
04 | * @param acceleration 加速度 |
05 | * @param time 時間間隔 (毫秒) |
07 | function goTop(acceleration, time) { |
08 | acceleration = acceleration || 0.1; |
18 | if (document.documentElement) { |
19 | x1 = document.documentElement.scrollLeft || 0; |
20 | y1 = document.documentElement.scrollTop || 0; |
23 | x2 = document.body.scrollLeft || 0; |
24 | y2 = document.body.scrollTop || 0; |
26 | var x3 = window.scrollX || 0; |
27 | var y3 = window.scrollY || 0; |
30 | var x = Math.max(x1, Math.max(x2, x3)); |
32 | var y = Math.max(y1, Math.max(y2, y3)); |
34 | // 滾動距離 = 目前距離 / 速度, 因為距離原來越小, 速度是大于 1 的數, 所以滾動距離會越來越小 |
35 | var speed = 1 + acceleration; |
36 | window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); |
40 | var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; |
41 | window.setTimeout(invokeFunction, time); |
效果演示
document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其實都是一樣的，但它們只在某些瀏覽器中起作用。至于那哪個在哪些瀏覽器起作用可以自己調試一下。
如何使用？
1 | <a href="#" onclick="goTop();return false;">TOP</a> |
本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請
點擊舉報。
