很多網頁在下方都會放置一個“返回頂部”按鈕,尤其是頁面底部沒有導航的網頁,這樣可以幫助訪客重新找到導航或者重溫一遍廣告(想得真美)。隨著近幾年來 JavaScript 的應用日漸廣泛,滑動效果無處不在,於是我也跟跟風,將返回頂部功能做成了滑動效果。後來為了更貼合物理特征, 改造做成了減速的滑動效果。
首先說一下原理吧,我們會獲取滾動條到頁面頂部的距離,然後上移一定的距離;再獲取滾動條到頁面頂部的距離,上移一定的距離(比上一次小一點);以此類推 ...
<script type="text/javascript"> /** * 回到頁面頂部 * @param acceleration 加速度 * @param time 時間間隔 (毫秒) **/ function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } var x3 = window.scrollX || 0; var y3 = window.scrollY || 0; // 滾動條到頁面頂部的水平距離 var x = Math.max(x1, Math.max(x2, x3)); // 滾動條到頁面頂部的垂直距離 var y = Math.max(y1, Math.max(y2, y3)); // 滾動距離 = 目前距離 / 速度, 因為距離原來越小, 速度是大於 1 的數, 所以滾動距離會越來越小 var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); // 如果距離不為零, 繼續調用迭代本函數 if(x > 0 || y > 0) { var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; window.setTimeout(invokeFunction, time); } } </script>
document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其實都是一樣的,但它們只在某些浏覽器中起作用。至於那哪個在哪些浏覽器起作用可以自己調試一下。
如何使用?
復制代碼 代碼如下:
<a href="#" onclick="goTop();return false;">TOP</a>