javascript返回頂部的按鈕實現方法
更新時間:2016年01月09日 17:46:59 作者:針仙落_獨
這篇文章主要介紹了javascript返回頂部的按鈕實現方法,需要的朋友可以參考下
本文實例介紹了javascript返回頂部的按鈕實現方法,分享給大家供大家參考,具體內容如下
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(){
//設置定時器
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);
};
};
希望本文所述對大家學習javascript程序設計有所幫助。
相關文章
使用JSX 建立組件 Parser(解析器)開發(fā)的示例
這篇文章主要介紹了使用JSX 建立組件 Parser(解析器)開發(fā)的示例(前端組件化)本文重點講述我們如何從0開始搭建一個組件系統(tǒng),基于標記語言的Parser的一種風格2021-04-04
JS動態(tài)增加刪除UL節(jié)點LI及相關內容示例
這篇文章主要介紹了JS如何動態(tài)增加刪除UL節(jié)點LI及相關內容,需要的朋友可以參考下2014-05-05

