JS判断滚动条出现带缓冲的“返回顶部”按钮

发布时间：2018-08-16 04:57:17 所属栏目：Unix 来源：站长网

导读：JS判断滚动条出现带缓冲的返回顶部按钮，该代码实现了默认是不显示返回顶部的，如果您向下滚动了网页，则出现返回顶部按钮，测试时候用回车代替了网页的主体内容，可能不能看到真正的滚动缓冲的效果，真正加入到你的网页后功能就完全正常显示了，本效果在

　　JS判断滚动条出现带缓冲的“返回顶部”按钮，该代码实现了默认是不显示“返回顶部”的，如果您向下滚动了网页，则出现“返回顶部”按钮，测试时候用回车代替了网页的主体内容，可能不能看到真正的滚动缓冲的效果，真正加入到你的网页后功能就完全正常显示了，本效果在兼容性方面做的也相当不错的。

　　示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>返回顶部按钮</title>  <style type="text/css"> body{ font:12px Verdana, Geneva, sans-serif; line-height:1.2; text-align:center; margin:0px; } #gotopbtn { width:100px; height:30px; background:#fff; position:fixed; bottom:100px; right:20px; display:none; cursor:pointer; font-size:14px; line-height:30px; border:1px solid #aaa; } .main{ width:100%; background:#ccc; margin:0 auto; height:2600px; } </style> </head> <body> <div class="main"> 烈火网特效代码VERYHUO。COM </div> <div id="gotopbtn">返回顶部</div> <script type="text/javascript"> backTop=function (btnId){ var btn=document.getElementById(btnId); var d=document.documentElement; window.onscroll=set; btn.onclick=function (){ btn.style.display="none"; window.onscroll=null; this.timer=setInterval(function(){ d.scrollTop-=Math.ceil(d.scrollTop*0.1); if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set); },10); }; function set(){btn.style.display=d.scrollTop?'block':"none"} }; backTop('gotopbtn'); </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：云计算网_宿迁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!