快捷導(dǎo)航

JavaScript簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁回到頂部功能

更新時(shí)間：2013年11月12日 15:39:26 作者：

JavaScript簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁回到頂部功能,大家可以參考一下

很多網(wǎng)頁在下方都會(huì)放置一個(gè)“返回頂部”按鈕，尤其是頁面底部沒有導(dǎo)航的網(wǎng)頁，這樣可以幫助訪客重新找到導(dǎo)航或者重溫一遍廣告（想得真美）。隨著近幾年來 JavaScript 的應(yīng)用日漸廣泛，滑動(dòng)效果無處不在，于是我也跟跟風(fēng)，將返回頂部功能做成了滑動(dòng)效果。后來為了更貼合物理特征，改造做成了減速的滑動(dòng)效果。
首先說一下原理吧，我們會(huì)獲取滾動(dòng)條到頁面頂部的距離，然后上移一定的距離；再獲取滾動(dòng)條到頁面頂部的距離，上移一定的距離（比上一次小一點(diǎn)）;以此類推 ...

復(fù)制代碼代碼如下:

<script type="text/javascript">
/**
 * 回到頁面頂部
 * @param acceleration 加速度
 * @param time 時(shí)間間隔 (毫秒)
 **/
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;

 // 滾動(dòng)條到頁面頂部的水平距離
 var x = Math.max(x1, Math.max(x2, x3));
 // 滾動(dòng)條到頁面頂部的垂直距離
 var y = Math.max(y1, Math.max(y2, y3));

 // 滾動(dòng)距離 = 目前距離 / 速度, 因?yàn)榫嚯x原來越小, 速度是大于 1 的數(shù), 所以滾動(dòng)距離會(huì)越來越小
 var speed = 1 + acceleration;
 window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

 // 如果距離不為零, 繼續(xù)調(diào)用迭代本函數(shù)
 if(x > 0 || y > 0) {
  var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
  window.setTimeout(invokeFunction, time);
 }
} 
</script>