Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 带缓冲效果的“返回顶部”按钮js代码

带缓冲效果的“返回顶部”按钮js代码

发布时间:2017-03-21   编辑:www.jquerycn.cn
jquery中文网为您提供带缓冲效果的“返回顶部”按钮js代码等资源,欢迎您收藏本站,我们将为您提供最新的带缓冲效果的“返回顶部”按钮js代码资源
提示:您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>带缓冲效果的“返回顶部”按钮</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <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:#fff; margin:0 auto; height:2000px; } </style> </head> <body>
返回顶部
<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></textarea>
提示:您可以先修改部分代码再运行

您可能感兴趣的文章:
带缓冲效果的“返回顶部”按钮js代码
网站顶部带缓冲打开和关闭功能的横栏提示层js代码
返回顶端的js代码(纯文字版)
网页中返回顶部代码(多种方法)另附注释说明
隐藏与显示回到顶部按钮的js代码
仿新浪微博返回顶部的jquery实现代码
js+JQuery返回顶部功能如何实现
php函数ob_start()、ob_end_clean()、ob_get_contents()
php输出缓存ob系列函数用法
PHP基础之输出缓冲区基本概念、原理分析

[关闭]