特效介绍
简单实用的jquery返回顶部插件，当滚动条滚动到距离底部150px时，返回顶部按钮在右下角显示，点击该按钮，滚动条滚动到顶部，同时，返回顶部按钮消失。
使用方法
1、将下面的css样式和js引入到头部01 | <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> |
02 | <script src="jquery.toTop.js"></script> |
03 | <style> |
04 | #totop { |
05 | position: fixed; |
06 | bottom: 40px; |
07 | right: 10px; |
08 | z-index: 999; |
09 | width: 71px; |
10 | cursor: pointer; |
11 | display: none; |
12 | } |
13 | #totop a { |
14 | display: block; |
15 | width: 71px; |
16 | height: 24px; |
17 | padding-top: 48px; |
18 | background: url(./images/toTop.gif) no-repeat; |
19 | text-align: center; |
20 | text-decoration: none; |
21 | color: #888 |
22 | } |
23 | #totop a.current { |
24 | background-position: -88px 0; |
25 | color: #3a9 |
26 | } |
27 | </style> |
01 | <script type="text/javascript"> |
02 | $(function (){ |
03 | /** |
04 | 1.将该返回顶部div 放置到容器中去 追加 append |
05 | 2.判断滚动条是否移动到底部 |
06 | 3.鼠标移动到返回顶部按钮的时候 背景图发生变化 |
07 | 4.当点击顶部按钮,给body,html对象附加一个animate动画效果 |
08 | 5.动画效果 里面 需要几个参数 |
09 | animate({},1000); 第一个参数CSS属性对象传参,第二个参数是变化的时间 |
10 | **/ |
11 | $(window).toTop({ |
12 | showHeight : 150, |
13 | speed : 1000 |
14 | }); |
15 |
16 | }); |
17 | </script> |
showHeight : 150, //滚动条滚动到距离底部什么位置时显示返回顶部按钮，单位是px
speed : 1000 //滚动条滚动到顶部时间，单位为毫秒。
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
