首页 > 特效插件 > 其他特效 >  简单实用的jquery返回顶部插件正文

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

特效介绍
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   //滚动条滚动到顶部时间,单位为毫秒。