返回顶端

使用jquery返回顶端。

html：

1 <p><a id="back_to_top" onclick="BackTop(this)"><i style="line-height:1px;font-size:30px"  class="fa fa-angle-double-up" aria-hidden="true"></i></a></p>

这里用font-awasome的向上图标，也可以使用图片来代替。

css：

 1         #back_to_top{
 2         position:fixed;
 3         right:3px;
 4         bottom:3px;
 5         height:44px;
 6          45px;    
 7         text-align:center;
 8         padding-top:20px;    
 9         overflow: hidden;
10         cursor:pointer;
11         background-color:#FFFFAA;
12         z-index:10000;
13         }

js：

 1     //back to top
 2          function BackTop() {
 3                 $(document).scrollTop(0)
 4             }
 5     $(function(){
 6         //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
 7         $(function () {
 8             $(window).scroll(function(){
 9                 if ($(window).scrollTop()>100){
10                     $("#back_to_top").fadeIn(1100);
11                 }
12                 else
13                 {
14                     $("#back_to_top").fadeOut(1100);
15                 }
16             });
17  
18             //当点击跳转链接后，回到页面顶部位置
19  
20             $("#back-to-top").click(function(){
21                 $('body,html').animate({scrollTop:0},1000);
22                 return false;
23             });
24         });
25     });

这里使用jquery的fadeIn和fadeOut来动画显示图标。效果如下：