頁面中添加錨點的幾種方式

時間 2019-11-07

標籤頁面添加幾種方式简体版

原文原文鏈接

本文檔建立時間:2018-11-7 15:52:28html

方法一,使用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動畫跳轉

廢話不說,先上代碼:spa

 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>