javascript 回到頂部效果的實(shí)現(xiàn)代碼

更新時(shí)間：2014年02月17日 09:02:21 作者：

本篇文章主要是對(duì)javascript 回到頂部效果的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

//speed 滾動(dòng)速度 time 時(shí)間間隔
function gotoTop(speed,time){

speed = speed || 0.1;
time = time || 16;

// 滾動(dòng)條到頁面頂部的水平距離
var x = document.body.scrollLeft;

// 滾動(dòng)條到頁面頂部的垂直距離
var y = document.body.scrollTop;

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

// 如果距離不為零, 繼續(xù)調(diào)用迭代本函數(shù)
if(x > 0 || y > 0) {

window.setTimeout("gotoTop(" + speed + ", " + time + ")", time);
}
}

您可能感興趣的文章:

相關(guān)文章

JavaScript頁面加載事件實(shí)例講解
在本篇文章中我們給大家通過實(shí)例講解一下關(guān)于JavaScript頁面加載事件的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以參考下。
2019-09-09
7個(gè)令人驚訝的JavaScript特性詳解
在學(xué)習(xí)ES6的過程中我碰到了幾個(gè)特性，它們讓我驚訝，其中大部分是關(guān)于 ES6 的特性但也有一部分是 ES3 特性，這些特性我以前從未用過，而現(xiàn)在我將開始使用它們，感興趣的小伙伴可以跟著小編一起來學(xué)習(xí)
2023-05-05
淺析JavaScript中五種模塊系統(tǒng)的使用
模塊系統(tǒng)是什么？簡(jiǎn)單來說，其實(shí)就是我們?cè)谝粋€(gè)文件里寫代碼，聲明一些可以導(dǎo)出的字段，然后另一個(gè)文件可以將其導(dǎo)入并使用。今天我們來聊聊?JavaScript?的模塊系統(tǒng)，感興趣的可以了解一下
2022-11-11
前端如何利用JS實(shí)現(xiàn)自定義表格滾動(dòng)效果實(shí)例
在數(shù)據(jù)可視化大屏中,滾動(dòng)表格是一種常見的需求,本文介紹了如何利用scrollTop屬性和定時(shí)器來制作滾動(dòng)效果,不依賴于任何插件,可以實(shí)現(xiàn)自定義的滾動(dòng)表格,文中通過代碼介紹是非常詳細(xì),需要的朋友可以參考下
2024-09-09
javascript 定時(shí)器工作原理分析
說到 javascript 中的定時(shí)器，我們肯定會(huì)想到 setTimeout() 和 setInterval() 這兩個(gè)函數(shù)。本文將從事件循環(huán)（Event Loop）的角度來分析兩者的工作原理和區(qū)別
2016-12-12
一文搞懂JavaScript中原型與原型鏈
js中的原型與原型鏈應(yīng)該是老生常談的話題了，在前端面試中基本都是必問的一個(gè)問題，但是很多人還是稀里糊涂的，只知道其表層含義。本文將帶大家深入了解JavaScript中的原型與原型鏈，感興趣的可以學(xué)習(xí)一下
2022-10-10
JavaScript高階教程之“==”隱藏下的類型轉(zhuǎn)換
這篇文章主要給大家介紹了關(guān)于JavaScript高階教程之“==”隱藏下類型轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
詳解JavaScript的垃圾回收機(jī)制
這篇文章主要為大家介紹了JavaScript的垃圾回收機(jī)制，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
JavaScript通過this變量快速找出用戶選中radio按鈕的方法
這篇文章主要介紹了JavaScript通過this變量快速找出用戶選中radio按鈕的方法,涉及javascript中this變量的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
JS實(shí)現(xiàn)輪播圖案例
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)輪播圖案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04