溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關在頁面中添加錨點的方法有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
1、通過設置a標簽的href屬性，跳轉到頁面中指定id標簽的位置
2、a標簽的href屬性值前要增加#來作為標識，表示是在當前頁面的內部跳轉
簡單的案例：
<html> <head></head> <body> <!--設置錨點的a標簽--> <a href='#miao'>跳一跳</a> <br /> <!--跳轉到的錨點位置--> <h4 id='miao'>跳到這里..</h4> </body> </html>
此方法的弊端有很多，比如會改變地址欄參數，跳轉比較突兀，對用戶不友好等...
所以，如果你比較注重細節，有這方面的強迫癥，建議使用下面這種方法。
方法二：使用jQuery的animate動畫跳轉
廢話不說，先上代碼：
<html>
<head>
<title></title>
<script>
$(document).ready(function () {
//點擊觸發事件
$("#jumpNow").click(function () {
$("html,body").animate({
scrollTop: $("#imhere").offset().top//跳轉到的位置
}, {
duration: 400,//預定速度
easing: "swing",//動畫效果.swing:在開頭/結尾移動慢，在中間移動快;"linear": 勻速移動
});
});
});
</script>
</head>
<body>
<!--設置錨點的標簽-->
<span id='jumpNow'>跳一跳</span>
<br />
<!--跳轉到的錨點位置-->
<h4 id='imhere'>跳到這里...</h4>
</body>
</html>jQuery的animate是實現頁面動畫的函數，功能比較強大，實現一個錨點跳轉綽綽有余。
此方法可以控制動畫跳轉的速度和方式，并且不會改變地址欄的參數，相對來說比較優雅。建議使用此方法！
關于在頁面中添加錨點的方法有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
