用JavaScript 實現變速回到頂部

一般網頁的下方都會放置一個置頂按鈕, 尤其是頁面底部沒有導航的網頁, 這樣可以協助訪客重新找到導航或者重溫一遍廣告 (想得真美). 隨著近幾年來 JavaScript 的應用日漸廣泛, 滑動效果無處不在, 於是我也跟跟風, 將置頂功能做成了滑動效果. 後來為了更貼合物理特徵, 改造做成了減速的滑動效果.

首先說一下原理吧. 我們會擷取捲軸到頁面頂部的距離, 然後上移一定的距離; 再擷取捲軸到頁面頂部的距離, 上移一定的距離 (比上一次小一點); ...

 

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 其實都是一樣的, 但它們只在某些瀏覽器中起作用. 至於那哪個在哪些瀏覽器起作用可以自己調試一下.

HTML 程式碼:<a href="javascript:void(0);" onclick="javascript:goTop();return false;">返回頂部</a>