jquery頁面內錨點平滑跳轉主要依靠jquery兩個函數:javascript
scroolTop:$(selector).scrollTop(offset)scrollTop() 方法返回或設置匹配元素的滾動條的垂直位置。scroll top offset 指的是滾動條相對於其頂部的偏移。html
關鍵代碼java
<script type="text/javascript"> $(document).ready(function() { $("#clicksource a").click(function() { var href=$(this).attr("href"); var pos= $(href).offset().top; $("html,body").animate({scrollTop:pos},9000); return false; } ); }); </script>
選中點擊處href="#id",id值,經過動畫處理,將該值對應元素位置以動畫效果移到滾動條頂部。【語言表達能力實在糟糕,上參考例子吧】jquery
參考事例函數
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#clicksource a").click(function() { var href=$(this).attr("href"); var pos= $(href).offset().top; $("html,body").animate({scrollTop:pos},9000); return false; } ); }); </script> </head> <body> <div id="lrh">jump finished</div> <div>test1</div> <div>test</div> <div>test2</div> <div>test</div> <div>test3</div> <div>test</div> <div>test4</div> <div>test</div> <div>test5</div> <div>test</div> <div>test6</div> <div>test</div> <div>test</div> <div>test7</div> <div>test</div> <div>test8</div> <div>test</div> <div>test</div> <div>test9</div> <div>test1</div> <div>test</div> <div>test2</div> <div>test</div> <div>test3</div> <div>test</div> <div>test4</div> <div>test</div> <div>test5</div> <div>test</div> <div>test6</div> <div>test</div> <div>test</div> <div>test7</div> <div>test</div> <div>test8</div> <div>test</div> <div>test</div> <div>test9</div> <div id="clicksource"> <a href="#lrh">lrh</a> </div> </body> </html>