jQuery写出可调控自定义的平滑滚动效果

来源：互联网发布：淘宝买二手书看可以吗编辑：程序博客网时间：2024/05/16 13:03

科技优家 2016-11-24 19:54

今天朋友，没错，是上次的好基友，在用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数值越大，速度越快。所以，请根据需求自行把握和调整。谢谢。

0 0