JS實(shí)現(xiàn)回到頁面頂部動(dòng)畫效果的簡單實(shí)例
最近在模仿各大網(wǎng)站寫頁面樣式和交互,發(fā)現(xiàn)好多都有回到頂部的需要,所以寫了一下js,記錄下來。
發(fā)現(xiàn)還可以添加從快到慢的動(dòng)畫效果和隨時(shí)下拉滾動(dòng)條停止?jié)L動(dòng)的功能, 參考了imooc上相關(guān)課程,最終實(shí)現(xiàn)JS代碼如下:
//頁面加載后觸發(fā)
window.onload = function(){
var btn = document.getElementById('btn');
var timer = null;
var isTop = true;
//獲取頁面可視區(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";
};
//回到頂部過程中用戶滾動(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);
};
};
以上這篇JS實(shí)現(xiàn)回到頁面頂部動(dòng)畫效果的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
bootstrap側(cè)邊欄圓點(diǎn)導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了bootstrap側(cè)邊欄圓點(diǎn)導(dǎo)航效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
關(guān)于Bootstrap彈出框無法調(diào)用問題的解決辦法
這篇文章主要介紹了關(guān)于Bootstrap彈出框無法調(diào)用問題的解決辦法的相關(guān)資料,需要的朋友可以參考下2016-03-03
js去除重復(fù)字符串兩種實(shí)現(xiàn)方法
js去除重復(fù)字符串在項(xiàng)目開發(fā)中很實(shí)用,接下來詳細(xì)介紹實(shí)現(xiàn)方法,感興趣的朋友可以參考下2013-01-01
基于JavaScript偽隨機(jī)正態(tài)分布代碼實(shí)例
這篇文章主要介紹了基于JavaScript偽隨機(jī)正態(tài)分布代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
uniapp 如何設(shè)置 tabbar 的 midButton 按鈕
在UniApp開發(fā)中,設(shè)置TabBar的midButton按鈕可以增加用戶交互的便利性,本文介紹了在App.vue中監(jiān)聽事件的方法,并提供了官方文檔鏈接作為參考,通過這種方式可以實(shí)現(xiàn)TabBar中的特殊按鈕功能,提升應(yīng)用的用戶體驗(yàn)2024-10-10
用javascript讀取xml文件讀取節(jié)點(diǎn)數(shù)據(jù)
這篇文章主要介紹了用javascript讀取xml文件讀取節(jié)點(diǎn)數(shù)據(jù)的具體實(shí)現(xiàn),需要的朋友可以參考下2014-08-08

