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