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