Verwenden Sie -Links, um zum entsprechenden Teil der Seite zu scrollen

Mit dem Aufkommen von Website-Seiten ist das Scrollen als Methode zum Navigieren auf langen Seiten immer beliebter geworden. Mit JS + jQuery-Code können Sie ganz einfach Links in Navigationselementen setzen, um zum entsprechenden Teil der Seite zu scrollen. Wenn Sie gut abbauen möchten, wenn JS nicht vorhanden ist, fügen Sie der Seite bitte Anker-Tags hinzu. In diesem Artikel erfahren Sie, wie Sie mit

-Links zum entsprechenden Teil der Seite scrollen.

Das Folgende ist der spezifische Code

Coffeescript:

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

oder JS-Code:

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

HTML-Code:

<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>

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte HTML-Video-Tutorial auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonVerwenden Sie

-Links, um zum entsprechenden Teil der Seite zu scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!