JavaScript簡單實現(xiàn)網(wǎng)頁回到頂部功能
更新時間：2013年11月12日 15:39:26 作者：
JavaScript簡單實現(xiàn)網(wǎng)頁回到頂部功能,大家可以參考一下
很多網(wǎng)頁在下方都會放置一個“返回頂部”按鈕，尤其是頁面底部沒有導(dǎo)航的網(wǎng)頁，這樣可以幫助訪客重新找到導(dǎo)航或者重溫一遍廣告（想得真美）。隨著近幾年來 JavaScript 的應(yīng)用日漸廣泛，滑動效果無處不在，于是我也跟跟風(fēng)，將返回頂部功能做成了滑動效果。后來為了更貼合物理特征， 改造做成了減速的滑動效果。
首先說一下原理吧，我們會獲取滾動條到頁面頂部的距離，然后上移一定的距離；再獲取滾動條到頁面頂部的距離，上移一定的距離（比上一次小一點）;以此類推 ...
<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 的數(shù), 所以滾動距離會越來越小
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 其實都是一樣的，但它們只在某些瀏覽器中起作用。至于那哪個在哪些瀏覽器起作用可以自己調(diào)試一下。
如何使用？
<a href="#" onclick="goTop();return false;">TOP</a>
首先說一下原理吧，我們會獲取滾動條到頁面頂部的距離，然后上移一定的距離；再獲取滾動條到頁面頂部的距離，上移一定的距離（比上一次小一點）;以此類推 ...
復(fù)制代碼 代碼如下:
<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 的數(shù), 所以滾動距離會越來越小
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 其實都是一樣的，但它們只在某些瀏覽器中起作用。至于那哪個在哪些瀏覽器起作用可以自己調(diào)試一下。
如何使用？
復(fù)制代碼 代碼如下:
<a href="#" onclick="goTop();return false;">TOP</a>
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何基于three.js實現(xiàn)的3D粒子動效的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js css實現(xiàn)垂直方向自適應(yīng)的三角提示菜單
這篇文章主要為大家詳細(xì)介紹了js css實現(xiàn)垂直方向自適應(yīng)的三角提示菜單的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)詳情頁放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星星評分效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
showModalDialog 和 showModelessDialog
showModalDialog 和 showModelessDialog...2007-01-01
window對象提供了兩個方法來實現(xiàn)定時器的效果，分別是window.setTimeout()和window.setInterval。其中前者可以使一段代碼在指定時間后運行；而后者則可以使一段代碼每過指定時間就運行一次2015-10-10
本文主要介紹了原生js實現(xiàn)新聞列表展開/收起全文功能的知識要點、注意事項以及完整代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
electron的webview和內(nèi)嵌網(wǎng)頁通信的方法
在 Electron 的世界里,webview 標(biāo)簽相當(dāng)于一個小盒子,里面可以裝一個完整的網(wǎng)頁,就像一個迷你瀏覽器,這篇文章主要介紹了electron的webview和內(nèi)嵌網(wǎng)頁如何通信,需要的朋友可以參考下2024-04-04
js根據(jù)需要計算數(shù)組中重復(fù)出現(xiàn)某個元素的個數(shù)
今天小編就為大家分享一篇關(guān)于js根據(jù)需要計算數(shù)組中重復(fù)出現(xiàn)某個元素的個數(shù)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了微信小程序頁面間傳值與頁面取值操作,結(jié)合實例形式分析了微信小程序頁面間傳值及頁面取值操作相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-04-04