javascript返回頂部的按鈕實(shí)現(xiàn)方法
本文實(shí)例介紹了javascript返回頂部的按鈕實(shí)現(xiàn)方法,分享給大家供大家參考,具體內(nèi)容如下
html:
<a href="javascript:;" id="btn" title="回到頂部"></a>
css:
#btn{position:fixed;display:none;}
script:
獲取滾動條高度:document.documentElement.scrollTop || document.body.scrollTop
獲取可視區(qū)高度:document.documentElement.clientHeight
js代碼
window.onload = function(){
var obtn = document.getElementById('btn');
//獲取頁面可視區(qū)的高度
var clientHeight = document.documentElement.clientHeight;
var timer = null;
var isTop = true;
window.onscroll = function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= clientHeight){
//顯示按鈕
obtn.style.display = 'block';
}else {
//隱藏按鈕
obtn.style.display = 'none';
}
if (!isTop){
clearInterval(timer);
}
isTop = false;
};
obtn.onclick = function(){
//設(shè)置定時器
timer = setInterval(function(){
//獲取滾動條距離頂部的高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
isTop = true;
if (osTop === 0){
clearInterval(timer);
}
},30);
};
};
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
- JavaScript實(shí)現(xiàn)返回頂部按鈕案例
- JavaScript 監(jiān)控微信瀏覽器且自帶返回按鈕時間
- 基于Javascript實(shí)現(xiàn)返回頂部按鈕
- javascript中返回頂部按鈕的實(shí)現(xiàn)
- JavaScript阻止瀏覽器返回按鈕的方法
- javascript實(shí)現(xiàn)博客園頁面右下角返回頂部按鈕
- JS返回上一頁實(shí)例代碼通過圖片和按鈕分別實(shí)現(xiàn)
- js 點(diǎn)擊按鈕彈出另一頁,選擇值后,返回到當(dāng)前頁
- JavaScript 彈出窗體點(diǎn)擊按鈕返回選擇數(shù)據(jù)的實(shí)現(xiàn)
- JavaScript實(shí)現(xiàn)返回頂部按鈕
相關(guān)文章
JS+CSS實(shí)現(xiàn)簡單滑動門(滑動菜單)效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)簡單滑動門(滑動菜單)效果,通過JavaScript響應(yīng)鼠標(biāo)事件動態(tài)設(shè)置頁面元素樣式實(shí)現(xiàn)滑動菜單功能,需要的朋友可以參考下2015-09-09
fastclick插件導(dǎo)致日期(input[type="date"])控件無法被觸發(fā)該如何解決
這篇文章主要介紹了fastclick插件導(dǎo)致日期(input[type="date"])控件無法被觸發(fā)該如何解決,需要的朋友可以參考下2015-11-11
javascript巧用eval函數(shù)組裝表單輸入項為json對象的方法
這篇文章主要介紹了javascript巧用eval函數(shù)組裝表單輸入項為json對象的方法,實(shí)例分析了JavaScript使用eval函數(shù)動態(tài)構(gòu)造json對象的相關(guān)技巧,需要的朋友可以參考下2015-11-11
JS增加行復(fù)制行刪除行的實(shí)現(xiàn)代碼
這篇文章介紹了JS增加行復(fù)制行刪除行的實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-11-11
在Uniapp中獲取用戶地理位置的實(shí)現(xiàn)方法
本文詳細(xì)介紹了如何在Uniapp中獲取用戶的地理位置,包括申請高德地圖的Key、配置定位功能以及實(shí)現(xiàn)定位功能的代碼示例,感興趣的小伙伴跟著小編一起來看看吧2025-02-02
深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù)
這篇文章主要介紹了深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù) 的相關(guān)資料,需要的朋友可以參考下2016-08-08
JS實(shí)現(xiàn)簡單的todoList(記事本)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單的todoList(記事本)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08

