特效介绍

简单实用的jquery返回顶部插件,当滚动条滚动到距离底部150px时,返回顶部按钮在右下角显示,点击该按钮,滚动条滚动到顶部,同时,返回顶部按钮消失。
使用方法
1、将下面的css样式和js引入到头部<script src="https://5.jimth.com/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 //滚动条滚动到顶部时间,单位为毫秒。
