jQuery寫出可調控自定義的平滑滾動效果(錨點跳轉動畫)


今天朋友,沒錯,是上次的好基友,在用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數值越大 ,速度越快。所以,請根據需求自行把握和調整。謝謝。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM