//頁(yè)面加載后觸發(fā)
window.onload = function(){
var btn = document.getElementById('btn');
var timer = null;
var isTop = true;
//獲取頁(yè)面可視區(qū)高度
var clientHeight = document.documentElement.clientHeight;
//滾動(dòng)條滾動(dòng)時(shí)觸發(fā)
window.onscroll = function() {
//顯示回到頂部按鈕
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= clientHeight) {
btn.style.display = "block";
} else {
btn.style.display = "none";
};
//回到頂部過(guò)程中用戶(hù)滾動(dòng)滾動(dòng)條，停止定時(shí)器
if (!isTop) {
clearInterval(timer);
};
isTop = false;
};
btn.onclick = function() {
//設(shè)置定時(shí)器
timer = setInterval(function(){
//獲取滾動(dòng)條距離頂部高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor(-osTop / 7);
document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
//到達(dá)頂部，清除定時(shí)器
if (osTop == 0) {
clearInterval(timer);
};
isTop = true;
},30);
};
};

以上內(nèi)容是小編給大家介紹的基于JavaScript實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫(huà)代碼，代碼簡(jiǎn)單易懂，所有沒(méi)給大家附太多的注釋?zhuān)绻蠹以趨⒖歼^(guò)程中發(fā)現(xiàn)有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

一文帶你理解JavaScript 觀察者模式
觀察者模式（Observer Pattern）是一種行為型設(shè)計(jì)模式，它定義了一種一對(duì)多的依賴(lài)關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象，本文將帶你詳細(xì)了解JavaScript 觀察者模式，,需要的朋友可以參考下
2023-05-05
JavaScript canvas實(shí)現(xiàn)文字時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)文字時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
javascript 使用sleep函數(shù)的常見(jiàn)方法詳解
這篇文章主要介紹了javascript 使用sleep函數(shù)的常見(jiàn)方法,結(jié)合實(shí)例形式分析總結(jié)了javascript sleep函數(shù)的功能、常見(jiàn)使用方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
js檢測(cè)IE8及以下瀏覽器版本并做出提示的函數(shù)代碼
這篇文章主要介紹了js檢測(cè)IE8及以下瀏覽器版本并做出提示的函數(shù)代碼,需要的朋友可以參考下
2023-02-02
Javascript讓DEDECMS告別手寫(xiě)Tag
dedecms在編輯修改內(nèi)容時(shí),TAG標(biāo)簽需要手動(dòng)輸,中文的Tag, 中間還得用半角字符','分隔, 輸入法切來(lái)切去很不方便, 于是動(dòng)手改后臺(tái)代碼, 利用后臺(tái)的tags_main.php, 讓dedecms添加內(nèi)容時(shí)能去tags_main里去選擇.
2014-09-09
JAVASCRIPT keycode總結(jié)
JAVASCRIPT中keycode總結(jié)，方便需要控制keycode的朋友
2009-02-02
深入了解JavaScript代碼覆蓋
這篇文章主要介紹了深入了解JavaScript代碼覆蓋 ,代碼覆蓋提供有關(guān)是否以及可選地應(yīng)用程序的某些部分被執(zhí)行的頻率的信息。它通常用于判定一個(gè)測(cè)試套件執(zhí)行特定代碼庫(kù)的全面程度。,需要的朋友可以參考下
2019-06-06
JavaScript使用技巧精萃[代碼非常實(shí)用]
為方便大家查找不做分頁(yè)設(shè)置ctrl+F即可
2008-11-11
js prototype截取字符串函數(shù)
prototype它是用Javascript寫(xiě)好的一些API，包括對(duì)Javascript中的類(lèi)如String，Array等進(jìn)行的擴(kuò)充，把JS文件嵌入后直接用就行了
2010-04-04
javascript對(duì)象的相關(guān)操作小結(jié)
下面小編就為大家?guī)?lái)一篇javascript對(duì)象的相關(guān)操作小結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05