實(shí)現(xiàn)變速回到頂部的JavaScript代碼
更新時(shí)間：2011年05月09日 19:13:35 作者：
一般網(wǎng)頁(yè)的下方都會(huì)放置一個(gè)置頂按鈕, 尤其是頁(yè)面底部沒有導(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)); ...
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);
}
}
document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其實(shí)都是一樣的, 但它們只在某些瀏覽器中起作用. 至于那哪個(gè)在哪些瀏覽器起作用可以自己調(diào)試一下.
HTML 代碼:
<a href="#" onclick="goTop();return false;">TOP</a>
首先說(shuō)一下原理吧. 我們會(huì)獲取滾動(dòng)條到頁(yè)面頂部的距離, 然后上移一定的距離; 再獲取滾動(dòng)條到頁(yè)面頂部的距離, 上移一定的距離 (比上一次小一點(diǎn)); ...
JavaScript 代碼:
復(fù)制代碼 代碼如下:
/**
* 回到頁(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);
}
}
document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其實(shí)都是一樣的, 但它們只在某些瀏覽器中起作用. 至于那哪個(gè)在哪些瀏覽器起作用可以自己調(diào)試一下.
HTML 代碼:
復(fù)制代碼 代碼如下:
<a href="#" onclick="goTop();return false;">TOP</a>
相關(guān)文章
JavaScript的Number對(duì)象的toString()方法
toString()方法可以把Number對(duì)象轉(zhuǎn)換成字符串，并返回此字符串，本文給大家介紹JavaScript的Number對(duì)象的toString()方法，對(duì)javascript對(duì)象方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能
本文主要介紹了Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能的代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
我們都知道javascript是一個(gè)弱類型語(yǔ)言，在ES5之前，javascript的程序編寫具有很強(qiáng)的隨意性，我可以稱之為懶散模式（sloppy mode）。比如可以使用未定義的變量，可以給對(duì)象中的任意屬性賦值并不會(huì)拋出異常等等。本文將詳細(xì)介紹javascript中的Strict模式。2021-06-06
基于JavaScript代碼實(shí)現(xiàn)自動(dòng)生成表格
本文給大家分享一段js代碼實(shí)現(xiàn)輸入表格行數(shù)、列數(shù)自動(dòng)生成表格源代碼，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
用JavaScript實(shí)現(xiàn)一個(gè)代碼簡(jiǎn)潔、邏輯不復(fù)雜的多級(jí)樹
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)一個(gè)代碼簡(jiǎn)潔、邏輯不復(fù)雜的多級(jí)樹,需要的朋友可以參考下2014-05-05
Kotlin學(xué)習(xí)第一步 kotlin語(yǔ)法特性
Kotlin學(xué)習(xí)第一步，從kotlin語(yǔ)法特性開始學(xué)習(xí)，包括變量定義、函數(shù)擴(kuò)展、Parcelable序列化、編寫工具類等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)更換頭像功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
javascript 面向?qū)ο髮?shí)戰(zhàn)思想分享
萬(wàn)物皆對(duì)象，所以，任何事物都是有特征(屬性)和動(dòng)作(方法)的，一般拿到一份需求分檔，或者你瀏覽一個(gè)網(wǎng)頁(yè)看到一個(gè)畫面的時(shí)候，腦子里就要有提煉出來(lái)的屬性和方法的能力，那你才是合格的2017-09-09
webpack 如何同時(shí)輸出壓縮和未壓縮的文件的實(shí)現(xiàn)步驟
這篇文章主要介紹了webpack 如何同時(shí)輸出壓縮和未壓縮的文件的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
本文給大家講述的是個(gè)人在一個(gè)項(xiàng)目中遇到的關(guān)于jsonp的post跨域問(wèn)題的解決過(guò)程，這里記錄下來(lái)，分項(xiàng)給大家。2015-07-07