Totop标签如何实现

当页面中出现了像如下的totop标签，如何实现？要求：开始时是隐藏的，在页面拖拽到一定距离时才出现，totop的过程有动画的效果。

4.1首先，定义html

<spanclass="totop">

<ahref="#"><iclass="icon-chevron-up"></i></a>

</span>

 4.2然后，是css

.totop {

    position: fixed;

//为什么不用absolute?因为我们是以body为定位对象，根据浏览器窗口进行元素定位。

//absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对

//定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框

    bottom: 0px;

    right: 0px;

    z-index: 104400;

    background: #fa3031;

}

 

.totop a, .totopa:visited, .totop a:hover{

    display: block;

    width: 30px;

    height: 30px;

    color: #fff;

    text-align: center;

    line-height: 30px;

    text-decoration:none;

}

4.3 JavaScript代码

$(".totop").hide();

    $(function () {

        $(window).scroll(function () {

            if($(this).scrollTop()>300){

                $('.totop').slideDown();

            }else{

                $('.totop').slideUp();

            }

        });

       $('.totop a').click(function (event) {

           event.preventDefault();

          $('body,html').animate({scrollTop:0},500);

       })

    });

4.4最终效果