欢迎来到我爱模板网，请记住我们的域名5imoban.net。本站资源大部分免费下载。如需定制，可联系站长QQ543031222。如果您觉得本站不错，请推荐给您的好友！

各位热心的网友们，欢迎给本站留言！您的任何建议和意见本站都会认真查看，仔细采纳！

当前位置：模板网首页 > 特效插件 > 其他特效 > 简单实用的jquery返回正文

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

作者：网页模板

大小：0.012MB

点击次数：

发布时间：2014-04-16 10:37

分享到：

特效介绍

简单实用的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 //滚动条滚动到顶部时间，单位为毫秒。