<style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; vertical-align: middle; } .main { width: 920px; height: 800px; margin: 0 auto; } #gotopbtn { width: 25px; height: 69px; background: url(images/topback.gif); position: fixed; bottom: 10%; right: 120px; display: none; cursor: pointer; } *html, *html body /* 修正IE6振动bug */ { background-image: url(about:blank); background-attachment: fixed; } *html #gotopbtn /* IE6 头部固定 */ { position: absolute; margin: 435px 0 0 0; top:expression(eval(document.documentElement.scrollTop)); } </style>
topback.gif图片,自行下载加上或者自己制作一张好看点的图片。
<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*1); if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set); },10); }; function set(){btn.style.display=d.scrollTop?'block':"none"} }; backTop('gotopbtn'); </script>
完整网页代码如下,可以拷贝到本地测试:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>通用返回顶部按钮-dfbazhu.com</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; vertical-align: middle; } .main { width: 920px; height: 800px; margin: 0 auto; } #gotopbtn { width: 25px; height: 69px; background: url(images/topback.gif); position: fixed; bottom: 10%; right: 120px; display: none; cursor: pointer; } *html, *html body /* 修正IE6振动bug */ { background-image: url(about:blank); background-attachment: fixed; } *html #gotopbtn /* IE6 头部固定 */ { position: absolute; margin: 435px 0 0 0; top:expression(eval(document.documentElement.scrollTop)); } </style> </head> <body> <div class="main"><img src="" width="920" height="1200" ></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*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>
另外,可以指定滚动高度多少时显示返回顶部按钮,请看:bootstrap返回顶部按钮,超过多少高度显示简洁的方法 只需要修改一下css样式,就能通用于任何网站。
(责任编辑:陆柏熺)