如何在頁面中新增錨點？增加錨點的兩種方法
- 青灯夜游轉載
- 2018-11-13 14:06:374506瀏覽
如何在頁面中新增錨點？本篇文章就為大家介紹在頁面中加入錨點的兩種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
方法一：使用a標籤新增
#1、透過設定a標籤的href屬性，跳到頁面中指定id標籤的位置
2、a標籤的href屬性值前要增加#來作為標識，表示是在目前頁面的內部跳到
簡單的案例：
<html> <head></head> <body> <!--设置锚点的a标签--> <a href='#miao'>跳一跳</a> <br /> <!--跳转到的锚点位置--> <h3 id='miao'>跳到这里..</h3> </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 />
<!--跳转到的锚点位置-->
<h3 id='imhere'>跳到这里...</h3>
</body>
</html>
jQuery的animate是實現頁面動畫的函數，功能比較強大，實現一個錨點跳轉綽綽有餘。如果想學習animate函數，可參考：【jQuery之深入學習Animate（一）】
此方法可以控制動畫跳轉的速度和方式，並且不會改變地址列的參數，相對來說比較優雅。建議使用此方法！
總結：以上就是本篇文章的全部內容，希望能對大家的學習有所幫助，更多想看影片教學推薦：jQuery教學！
以上是如何在頁面中新增錨點？增加錨點的兩種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除