返回顶端

使用jquery返回顶端。

html：

<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：

        #back_to_top{
        position:fixed;
        right:3px;
        bottom:3px;
        height:44px;
         45px;    
        text-align:center;
        padding-top:20px;    
        overflow: hidden;
        cursor:pointer;
        background-color:#FFFFAA;
        z-index:10000;
        }

 js：

    //back to top
         function BackTop() {
                $(document).scrollTop(0)
            }
    $(function(){
        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#back_to_top").fadeIn(1100);
                }
                else
                {
                    $("#back_to_top").fadeOut(1100);
                }
            });
 
            //当点击跳转链接后，回到页面顶部位置
 
            $("#back-to-top").click(function(){
                $('body,html').animate({scrollTop:0},1000);
                return false;
            });
        });
    });

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