回到顶部有多种实现方式：
1.通过锚点然后定位，这个比较简单，但是效果比较生硬，就不多解释了
2.通过JavaScript实现，用到了定时器，window.onload,window.onscroll,setInterval,clearInterval,document.documentElement.scrollTop||document.body.scrollTop(兼容谷歌火狐)
原理是通过监听滚动，获得实时的scrollTop，然后scrollTop-=200(常数)，这个也不多说了
3，通过jQuery实现，今天主要讲这个，首先准备一张大图，附上代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>回到顶部</title> <style type="text/css"> #btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; display:none; background:url(img/top_bg.png) no-repeat left top;} #btn:hover {background:url(img/top_bg.png) no-repeat 0 -39px;} .bg {width:1190px; margin:0 auto;} </style> <script src="js/jquery-1.7.2.js"></script> <script> $(function(){ var scrollTop=0; $(window).scroll(function(){ scrollTop=$(document).scrollTop(); var H=$(window).height(); if(scrollTop>H){ $('#btn').css({ display:'block' }); }else{ $('#btn').css({ display:'none' }); } }); $('#btn').click(function(){ $('body,html').animate({ scrollTop:0 },1000); }); }); </script> </head> <body> <a href="javascript:;" id="btn" title="回到顶部"></a> <div class="bg"> <img src="img/tb_bg.jpg" alt="" /> </div> </body> </html>