javascript返回顶部的按钮实现方法
本文实例介绍了javascript返回顶部的按钮实现方法,分享给大家供大家参考,具体内容如下
html:
<ahref="javascript:;"id="btn"title="回到顶部"></a>
css:
#btn{position:fixed;display:none;}
script:
获取滚动条高度:document.documentElement.scrollTop||document.body.scrollTop
获取可视区高度:document.documentElement.clientHeight
js代码
window.onload=function(){ varobtn=document.getElementById('btn'); //获取页面可视区的高度 varclientHeight=document.documentElement.clientHeight; vartimer=null; varisTop=true; window.onscroll=function(){ varosTop=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(){ //获取滚动条距离顶部的高度 varosTop=document.documentElement.scrollTop||document.body.scrollTop; varispeed=Math.floor(-osTop/6); document.documentElement.scrollTop=document.body.scrollTop=osTop+ispeed; isTop=true; if(osTop===0){ clearInterval(timer); } },30); }; };
希望本文所述对大家学习javascript程序设计有所帮助。