如何在頁面中新增錨點？增加錨點的兩種方法

如何在頁面中新增錨點？本篇文章就為大家介紹在頁面中加入錨點的兩種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

方法一：使用a標籤新增

#1、透過設定a標籤的href屬性，跳到頁面中指定id標籤的位置

2、a標籤的href屬性值前要增加#來作為標識，表示是在目前頁面的內部跳到

簡單的案例：

<!--设置锚点的a标签-->
<a>跳一跳</a>
<br>
<!--跳转到的锚点位置-->
<h3 id="跳到这里">跳到这里..</h3>

此方法的弊端有很多，例如會改變地址列參數，跳轉比較突兀，對用戶不友好等...

#所以，如果你比較注重細節，有這方面的強迫症，建議使用下面這種方法。

方法二：使用jQuery的animate動畫跳轉

廢話不說，先上程式碼：

    <title></title>
<script>
    $(document).ready(function () {
        //点击触发事件
        $("#jumpNow").click(function () {
            $("html,body").animate({
                scrollTop: $("#imhere").offset().top//跳转到的位置
            }, {
                    duration: 400,//预定速度
                    easing: "swing",//动画效果.swing:在开头/结尾移动慢，在中间移动快;"linear": 匀速移动
                });
        });

});
</script>



<!--设置锚点的标签-->
<span>跳一跳</span>
<br>
<!--跳转到的锚点位置-->
<h3 id="跳到这里">跳到这里...</h3>

jQuery的animate是實現頁面動畫的函數，功能比較強大，實現一個錨點跳轉綽綽有餘。如果想學習animate函數，可參考：【jQuery之深入學習Animate（一）】

此方法可以控制動畫跳轉的速度和方式，並且不會改變地址列的參數，相對來說比較優雅。建議使用此方法！

總結：以上就是本篇文章的全部內容，希望能對大家的學習有所幫助，更多想看影片教學推薦：jQuery教學！

以上是如何在頁面中新增錨點？增加錨點的兩種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！