很多網頁在下方都會放置一個「回到頂部」按鈕，尤其是頁面底部沒有導航的網頁，這樣可以幫助訪客重新找到導航或重溫一遍廣告（想得真美）。隨著近幾年來 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 其實都是一樣的，但它們只在某些瀏覽器中起作用。至於那哪個在哪些瀏覽器起作用可以自己調試一下。
如何使用？
