网页中一个简单的返回头部实例

一个简洁的返回网页顶部实例，通过CSS和一段JS控制，简单实用，推荐给大家收藏使用。CSS中定义一个返回顶部的图片，自己设定地址。

CSS段大致内容为：

1. <style type="text/css">
2. #gotop:hover{background-position:0px -51px}#gotop {width: 38px;height: 39px;position: fixed;bottom: 20px;right: 40px;top: auto;display: block;cursor: pointer;z-index: 999;background: #00a4ef url(/skin/21.png) no-repeat;border: 1px solid #dfdfdf;}
3. </style>

DIV调用内容：

1. <div id="gotop" style="display: none;"></div>

JS段内容：

1. <script type="text/javascript">
2. backTop=function (btnId){
3. var btn=document.getElementById(btnId);
4. var d=document.documentElement;
5. var b=document.body;
6. window.onscroll=set;
7. btn.onclick=function (){
8. btn.style.display="none";
9. window.onscroll=null;
10. this.timer=setInterval(function(){
11. d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
12. b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
13. if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);
14. },10);
15. };
16. function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?'block':"none"}
17. };
18. backTop('gotop');
19. </script>

想省事的可以直接调用。位置，图片，自己设定一下,下拉后显示！