码迷,mamicode.com
首页 > Web开发 > 详细

jQuery写出可调控自定义的平滑滚动效果(锚点跳转动画)

时间:2016-11-24 18:04:23      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:速度   src   效果   位置   ddd   asc   goto   没反应   跳转   

今天朋友,没错,是上次的好基友,在用jQuery.scrollTo.js这个插件的时候总是没反应,而且在函数里console可以输出数据,这点现在仍让我很困惑,难道是scroll版本和我引用的jQUery版本不兼容?我在自己本地搭建了一个小demo也没反应,于是就借助动画写了一个可以自定义滑动的距离和速度调控的demo。供大家参考,欢迎交流更好的办法。

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <title>jQuery写出可调控自定义的平滑滚动效果(锚点跳转动画)</title>
 6   <style type="text/css">
 7         div{
 8                 width:100%;
 9                 height:2000px;
10                 border:1px solid #ddd;
11         }    
12   </style>
13  </head>
14  <body>
15     <div id="d1"><a href="#" class="apply">最上面</a></div>
16     <div id="goto">最下面</div>
17   <script src="jquery-1.8.3.min.js"></script>
18   <script type="text/javascript">
19             $(‘.apply‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘#goto‘).offset().top/1.2}, 2000);}); 
20   </script>
21  </body>
22 </html>

1.2这个位置的数值越大,滑动的距离越小。2000数值越大 ,速度越快。所以,请根据需求自行把握和调整。谢谢。

jQuery写出可调控自定义的平滑滚动效果(锚点跳转动画)

标签:速度   src   效果   位置   ddd   asc   goto   没反应   跳转   

原文地址:http://www.cnblogs.com/yshtou/p/6098520.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!