javascript返回頂部的按鈕實現(xiàn)方法
本文實例介紹了javascript返回頂部的按鈕實現(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è)計有所幫助。
相關(guān)文章
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對象的方法,實例分析了JavaScript使用eval函數(shù)動態(tài)構(gòu)造json對象的相關(guān)技巧,需要的朋友可以參考下2015-11-11
深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù)
這篇文章主要介紹了深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù) 的相關(guān)資料,需要的朋友可以參考下2016-08-08

