Wie scrolle ich mithilfe der jQuery-Animation beim Klicken auf eine Schaltfläche reibungslos zu einem bestimmten Element?

Animieren Sie den Bildlauf zu einem bestimmten Element beim Klicken auf die Schaltfläche

Um zu einer bestimmten Position, einem bestimmten Bereich oder einem bestimmten Ziel auf einer Seite zu springen oder zu scrollen, wenn a Wenn Sie auf die Schaltfläche klicken, können Sie die Animationsfunktionen von jQuery nutzen.

HTML-Struktur:

Erstellen Sie ein Schaltflächenelement mit einer ID oder Klasse, um es in JavaScript zu referenzieren. Richten Sie außerdem das Zielelement mit einer ID ein, zu der gescrollt werden soll.

JavaScript:

<code class="javascript">$('#clickMe').click(function() {
    $('html, body').animate({
        scrollTop: $('#targetElement').offset().top
    }, 600);
});</code>

Wenn in diesem Skript auf die Schaltfläche #clickMe geklickt wird, Es löst die Animation der HTML- und Body-Elemente aus, um zum oberen Offset des #targetElements zu scrollen. Der Parameter 600 legt die Dauer der Animation in Millisekunden fest.

Beispiel:

Betrachten Sie die folgende HTML-Struktur:

<code class="html"><a id="clickMe" href="#">Go to Div</a>

<div id="targetElement">Target Div</div></code>

Das entsprechende JavaScript :

<code class="javascript">$('#clickMe').click(function() {
    $('html, body').animate({
        scrollTop: $('#targetElement').offset().top
    }, 600);
});</code>

Wenn Sie auf die Schaltfläche „Gehe zu Div“ klicken, scrollt die Seite reibungslos zum Element „Ziel-Div“.

Das obige ist der detaillierte Inhalt vonWie scrolle ich mithilfe der jQuery-Animation beim Klicken auf eine Schaltfläche reibungslos zu einem bestimmten Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!