很多網(wǎng)頁(yè)在下方都會(huì)放置一個(gè)“返回頂部”按鈕，尤其是頁(yè)面底部沒(méi)有導(dǎo)航的網(wǎng)頁(yè)，這樣可以幫助訪客重新找到導(dǎo)航或者重溫一遍廣告（想得真美）。隨著近幾年來(lái) JavaScript 的應(yīng)用日漸廣泛，滑動(dòng)效果無(wú)處不在，于是我也跟跟風(fēng)，將返回頂部功能做成了滑動(dòng)效果。后來(lái)為了更貼合物理特征， 改造做成了減速的滑動(dòng)效果。

首先說(shuō)一下原理吧，我們會(huì)獲取滾動(dòng)條到頁(yè)面頂部的距離，然后上移一定的距離；再獲取滾動(dòng)條到頁(yè)面頂部的距離，上移一定的距離（比上一次小一點(diǎn)）;以此類推 ...

<script type="text/Javascript"> /** * 回到頁(yè)面頂部 * @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)條到頁(yè)面頂部的水平距離 var x = Math.max(x1, Math.max(x2, x3)); // 滾動(dòng)條到頁(yè)面頂部的垂直距離 var y = Math.max(y1, Math.max(y2, y3)); // 滾動(dòng)距離 = 目前距離 / 速度, 因?yàn)榫嚯x原來(lái)越小, 速度是大于 1 的數(shù), 所以滾動(dòng)距離會(huì)越來(lái)越小 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>

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其實(shí)都是一樣的，但它們只在某些瀏覽器中起作用。至于那哪個(gè)在哪些瀏覽器起作用可以自己調(diào)試一下。

如何使用？

復(fù)制代碼 代碼如下:
<a href="#" onclick="goTop();return false;">TOP</a>

JavaScript技術(shù)：用原生js做個(gè)簡(jiǎn)單的滑動(dòng)效果的回到頂部，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。