本文檔創建時間:2018-11-7 15:52:28
方法一,使用a標簽添加
- 通過設置a標簽的href屬性,跳轉到頁面中指定id標簽的位置
- a標簽的href屬性值前要增加#來作為標識,表示是在當前頁面的內部跳轉
簡單的案例:
1 <html> 2 <head></head> 3 <body> 4 <!--設置錨點的a標簽--> 5 <a href='#miao'>跳一跳</a> 6 <br /> 7 <!--跳轉到的錨點位置--> 8 <h3 id='miao'>跳到這里..</h3> 9 </body> 10 </html>
此方法的弊端有很多,比如會改變地址欄參數,跳轉比較突兀,對用戶不友好等...
所以,如果你比較注重細節,有這方面的強迫症,建議使用下面這種方法.
方法二,使用jQuery的animate動畫跳轉
廢話不說,先上代碼:
1 <html> 2 <head> 3 <title></title> 4 <script> 5 $(document).ready(function () { 6 //點擊觸發事件 7 $("#jumpNow").click(function () { 8 $("html,body").animate({ 9 scrollTop: $("#imhere").offset().top//跳轉到的位置 10 }, { 11 duration: 400,//預定速度 12 easing: "swing",//動畫效果.swing:在開頭/結尾移動慢，在中間移動快;"linear": 勻速移動 13 }); 14 }); 15 16 }); 17 </script> 18 </head> 19 20 <body> 21 <!--設置錨點的標簽--> 22 <span id='jumpNow'>跳一跳</span> 23 <br /> 24 <!--跳轉到的錨點位置--> 25 <h3 id='imhere'>跳到這里...</h3> 26 </body> 27 28 </html>
jQuery的animate是實現頁面動畫的函數,功能比較強大,實現一個錨點跳轉綽綽有余.想學習animate函數的小伙伴可點擊參考此文檔:https://www.cnblogs.com/yixiaoheng/p/3505638.html
此方法可以控制動畫跳轉的速度和方式,並且不會改變地址欄的參數,相對來說比較優雅.牆裂建議使用此方法!over...
更多內容可訪問我的博客：http://www.yunc.top/