js实现回到顶部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js实现回到顶部</title> </head> <style type="text/css"> .box{ width:1190px; margin:0 auto;} #btn{ width:40px; height:40px; margin-left:610px; bottom:30px; left:50% ;position:fixed; background:url(top_bg.png) no-repeat left top; display:none;} #btn:hover{ background:url(top_bg.png); background-position:0 -40px;} </style> <script type="text/javascript"> window.onload=function(){//页面加载完成后执行 var obtn=document.getElementById("btn"); var timer=null; var my_scroll=true; var clientHeight=document.documentElement.clientHeight;//获取可视区高度 window.onscroll=function(){ var osTop=document.documentElement.scrollTop || document.body.scrollTop; if(osTop>=clientHeight){//判断滚动条距离页面顶端的距离是否大于可视区的高度,若大于则隐藏,小于则显示 obtn.style.display="block"; }else{ obtn.style.display="none"; } if(!my_scroll){ clearInterval(timer); } my_scroll=false; } obtn.onclick=function(){ var 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;//滚轮回到顶部由快到慢 my_scroll=true; if(osTop==0){ clearInterval(timer); } },30); } } </script> <body> <div class="box"><img src="tb_bg.jpg" /></div> <a href="javascript:;" id="btn" title="回到顶部"></a><!--javascript:;阻止标签的默认行为--> </body> </html>
主要知识点:
1.window.onload:页面加载完成触发事件
2.document.documentElement.clientHeight:获取可视区高度
3.window.onscroll:滚动条触发事件
4.document.documentElement.scrollTop || document.body.scrollTop:滚动条距离页面顶端的距离
5.setInterval:定时器
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。