这里回到顶端的实现很简单。用window对象的scroll()方法，然后用window对象的scrollTop()判断滚动多少距离后出现图标。用animated()方法设置｛scrollTop:0｝实现回到顶端。代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>回到顶端</title> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js" type="text/javascript" ></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <style> body{ background: rgba(0, 0, 0,.5); width: 100%; height:1200px; } .backtop{
//设置fixed定位图标 position: fixed; float: right; right: 100px; bottom: 100px; } </style> <script> $(function(){ var backtop = $(‘.backtop‘) $(backtop).hide(); $(window).scroll(function(){
//滚动大于100后出现图标 if($(window).scrollTop()>100){ $(backtop).fadeIn(); }else{ $(backtop).fadeOut(); } }); $(backtop).click(function(){
//回到顶端 $(‘body‘).animate({scrollTop:0},500); }); }); </script> </head> <body> <div class="backtop"> <span class="glyphicon glyphicon-circle-arrow-up" style="color: rgb(255, 107, 147);font-size:50px;"></span> </div> </body> </html>
原文：http://www.cnblogs.com/jxb520wan/p/4858683.html