jquery实现页面返回按钮

如题。

        当网页比较长之后，我们需要在页面添加一个返回顶部的功能。这个功能我们实现的方法有很多，例如，可以使用window.scrollTo(0,100)来实现。

        如果我要求实现的效果炫一些。

        例如，当页面滑动到一定的距离之后再出现这个返回按钮，返回按钮出现与消失要有淡出淡入的效果，来吧，让我用下面这段函数做出这个效果吧：

        js代码：

        

   //返回顶部的按钮
   $(document).ready(function(){
    // 页面向下滚动超过300px时按钮显示，否则隐藏
    $(window).scroll(function(){
    if($(this).scrollTop()>300){
    $('.back-to-top').fadeIn(700);//淡入
    } else {
    $('.back-to-top').fadeOut(700);//淡入
    }
    });
    // 点击按钮，向上动画滚动
    $('.back-to-top').click(function(event){
    event.preventDefault();
    //利用animate实现缓慢滑动回顶部的功能
    $('html,body').animate({scrollTop:0},500);
    })
});

        html内容

         

    <div class="back-to-top">
    <span>返 回</br>顶 部</span>
    </div><!-- /.back-to-top -->

        css内容：

 

.back-to-top {
    position: fixed;
    bottom: 1em;
    right: 9.5em;
    background-color: #000;
	opacity:0.8;
    text-align: center;
    padding: 10px 12px;
    color: #eee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    display: none;
	z-index:9000;
}
.back-to-top span{
	font-size:14px;
	font-family:"微软雅黑";
}

         实现效果如demo给出的效果所示：

         http://gd.qq.com/zt2013/gyh_shouye/index.htm