使用jQuery实现返回顶部

使用jQuery实现。所用图片：


1、尝试滚动 此页面到底部即可出现go2top按钮。

2、go2top-inner暂未使用。

HTML&JS定义：

<a id="go2top" class="go2top" href="#header"><span class="go2top-inner"></span></a>

<script type="text/javascript">

$(function(){

    $('#go2top').click(function(){

        $("html,body").animate({scrollTop:0},200);

        return false;

    });

    $(window).scroll(function(){

        var obj=$('#go2top');

        if(obj.offset().top>900){

            obj.show();

        }else{

            obj.hide();

        }

    });

});

</script>

CSS定义

.go2top {

    background: url("http://images.cnitblog.com/blog/84698/201303/28125209-67653841b1114531a2a1e6db63315d63.png") no-repeat scroll left top transparent;

    bottom: 65px;

    color: #444444;

    display: none;

    height: 50px;

    margin-left: 510px;

    position: fixed;

    right: 160px;

    text-align: center;

    width: 50px;

}

.go2top:hover {

    background-position: -50px top;

}

试试看，是不是有了返回顶部了，非常方便实用的功能，希望大家能够喜欢。