隨著近幾年來 JavaScript 的應用日漸廣泛, 滑動效果無處不在, 于是我也跟跟風, 將置頂功能做成了滑動效果. 后來為了更貼合物理特征, 改造做成了減速的滑動效果.
首先說一下原理吧. 我們會獲取滾動條到頁面頂部的距離, 然后上移一定的距離; 再獲取滾動條到頁面頂部的距離, 上移一定的距離 (比上一次小一點); ...
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 的數(shù), 所以滾動距離會越來越小 
var speed = 1 + acceleration; 
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); 
// 如果距離不為零, 繼續(xù)調用迭代本函數(shù) 
if(x > 0 || y > 0) { 
var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; 
window.setTimeout(invokeFunction, time); 
} 
} 