使用<nav>鏈接實(shí)現(xiàn)滾動(dòng)到頁面某一部分的方法

這篇文章給大家分享的是有關(guān)使用<nav>鏈接實(shí)現(xiàn)滾動(dòng)到頁面某一部分的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

隨著一頁網(wǎng)站的出現(xiàn)，使用滾動(dòng)作為導(dǎo)航長頁面的方法變得越來越流行。這一小部分是用JS + jQuery代碼實(shí)現(xiàn)的，您可以輕松地在nav元素中設(shè)置鏈接以滾動(dòng)到頁面的相應(yīng)部分。如果您希望在JS不存在時(shí)將錨標(biāo)記添加到頁面中。

Coffeescript：

$("nav").find("a").click (e) ->
    e.preventDefault()
    section = $(this).attr "href"
    $("html, body").animate
        scrollTop: $(section).offset().top

或JS：

$("nav").find("a").click(function(e) {
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(section).offset().top    });});

和一些示例HTML

<nav>
    <a href="#welcome">Welcome</a>
    <a href="#about">About</a>
    <a href="#section3">Section 3</a>
</nav>
<div id="welcome">Welcome to this website</div>
<div id="about">About this website, and such</div>
<div id="section3">The third section</div>

感謝各位的閱讀！關(guān)于使用<nav>鏈接實(shí)現(xiàn)滾動(dòng)到頁面某一部分的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！