在頁面中添加錨點(diǎn)的方法有哪些

發(fā)布時(shí)間：2020-08-29 14:45:06 來源：億速云閱讀：131 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)在頁面中添加錨點(diǎn)的方法有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

方法一：使用a標(biāo)簽添加

1、通過設(shè)置a標(biāo)簽的href屬性，跳轉(zhuǎn)到頁面中指定id標(biāo)簽的位置

2、a標(biāo)簽的href屬性值前要增加#來作為標(biāo)識(shí)，表示是在當(dāng)前頁面的內(nèi)部跳轉(zhuǎn)

簡(jiǎn)單的案例：

<html>
<head></head>
<body>
<!--設(shè)置錨點(diǎn)的a標(biāo)簽-->
<a href='#miao'>跳一跳</a>
<br />
<!--跳轉(zhuǎn)到的錨點(diǎn)位置-->
<h4 id='miao'>跳到這里..</h4>
</body>
</html>

此方法的弊端有很多，比如會(huì)改變地址欄參數(shù)，跳轉(zhuǎn)比較突兀，對(duì)用戶不友好等...

所以，如果你比較注重細(xì)節(jié)，有這方面的強(qiáng)迫癥，建議使用下面這種方法。

方法二：使用jQuery的animate動(dòng)畫跳轉(zhuǎn)

廢話不說，先上代碼：

<html>
<head>
    <title></title>
<script>
    $(document).ready(function () {
        //點(diǎn)擊觸發(fā)事件
        $("#jumpNow").click(function () {
            $("html,body").animate({
                scrollTop: $("#imhere").offset().top//跳轉(zhuǎn)到的位置
            }, {
                    duration: 400,//預(yù)定速度
                    easing: "swing",//動(dòng)畫效果.swing:在開頭/結(jié)尾移動(dòng)慢，在中間移動(dòng)快;"linear": 勻速移動(dòng)
                });
        });

});
</script>
</head>

<body>
<!--設(shè)置錨點(diǎn)的標(biāo)簽-->
<span id='jumpNow'>跳一跳</span>
<br />
<!--跳轉(zhuǎn)到的錨點(diǎn)位置-->
<h4 id='imhere'>跳到這里...</h4>
</body>

</html>

jQuery的animate是實(shí)現(xiàn)頁面動(dòng)畫的函數(shù)，功能比較強(qiáng)大，實(shí)現(xiàn)一個(gè)錨點(diǎn)跳轉(zhuǎn)綽綽有余。

此方法可以控制動(dòng)畫跳轉(zhuǎn)的速度和方式，并且不會(huì)改變地址欄的參數(shù)，相對(duì)來說比較優(yōu)雅。建議使用此方法！

關(guān)于在頁面中添加錨點(diǎn)的方法有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

在頁面中添加錨點(diǎn)的方法有哪些

方法一：使用a標(biāo)簽添加

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽