简单实用的jquery返回顶部插件

简单实用的jquery返回顶部插件，当滚动条滚动到距离底部150px时，返回顶部按钮在右下角显示，点击该按钮，滚动条滚动到顶部，同时，返回顶部按钮消失。
1、将下面的css样式和js引入到头部

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script src="jquery.toTop.js"></script>
<style>
#totop {
    position: fixed;
    bottom: 40px;
    right: 10px;
    z-index: 999;
    width: 71px;
    cursor: pointer;
    display: none;
}
#totop a {
    display: block;
    width: 71px;
    height: 24px;
    padding-top: 48px;
    background: url(./images/toTop.gif) no-repeat;
    text-align: center;
    text-decoration: none;
    color: #888
}
#totop a.current {
    background-position: -88px 0;
    color: #3a9
}
</style>

2、在body任意位置调用下面的代码

<script type="text/javascript">
$(function (){
    /**
        1.将该返回顶部div 放置到容器中去 追加 append
        2.判断滚动条是否移动到底部
        3.鼠标移动到返回顶部按钮的时候 背景图发生变化
        4.当点击顶部按钮,给body,html对象附加一个animate动画效果
        5.动画效果 里面 需要几个参数
            animate({},1000);    第一个参数CSS属性对象传参,第二个参数是变化的时间
    **/
    $(window).toTop({
        showHeight : 150,
        speed       : 1000
    });

});
</script>

参数详解：
        showHeight : 150,   //滚动条滚动到距离底部什么位置时显示返回顶部按钮，单位是px
        speed       : 1000   //滚动条滚动到顶部时间，单位为毫秒。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！