Scrollen in jQuery animieren

1. Verwenden Sie die Methode animate() zum Scrollen in jQuery
2. Verwenden Sie die animate()-Methode mit Zeitbindung zum Scrollen der Seite in jQuery

jQuery wird weithin für seine einfache Syntax zur Umsetzung komplexer Ideen beworben, während JavaScript ES6 heutzutage ein harter Konkurrent ist.

Wenn wir uns darauf konzentrieren, ein div oder eine Webseite auf eine bestimmte Höhe zu scrollen, bemerken wir mehrere Lösungen. Die jQuery-Methode animate() akzeptiert jedoch explizit die Instanz von body und html und scrollt bevorzugt.

Wir werden in unseren Beispielsets ein einfaches vertikales Scrollen über die jQuery-Methode animate() durchführen. Im letzteren Beispiel untersuchen wir eine Instanz mit einem begrenzten Zeitrahmen.

Verwenden Sie die Methode animate() zum Scrollen in jQuery

In diesem Zusammenhang akzeptieren wir die Instanz der Elemente body und html. Die Konvention ist also so, dass mehrere Browser die Funktion ungeachtet ihrer Beschränkungen ausführen können.

Als nächstes werden wir die Methode animate() zusammen mit der Instanz initiieren und die Angabe scrollTop: "0" setzen. Wir können scrollTop auch auf einen beliebigen Präferenzwert setzen.

In diesem Fall wird die Seite nicht nach oben geleitet; vielmehr steigt es auf den Abstand zwischen der gesamten Seitenhöhe und dem scrollTop-Wert.

Code-Auszug:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<h4>TOP</h4>
<h4>TOP-20</h4>
<div id="pos" style="height: 600px;background:pink"></div><br>
<button onclick="press()">Go to Top</button>
<script>
function press(){
  $("html, body").animate({scrollTop: "20"});
}
</script>

Ausgabe:

Verwenden Sie die animate()-Methode mit Zeitbindung zum Scrollen der Seite in jQuery

Dieses Beispiel enthält eine ähnliche Funktion wie das vorherige. Aber die Ergänzung hier ist, dass wir das Timing des Scrollens einstellen können, ohne die Funktion setInterval zu definieren.

Alles, was wir tun werden, ist das bevorzugte Timing zusammen mit der Eigenschaft scrollTop hinzuzufügen. Dies erleichtert oder sichert den Geschwindigkeitswert des Seiten-Scrolls.

Code-Auszug:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<h4>TOP</h4>
<div id="pos" style="height: 600px;background:powderblue"></div><br>
<button onclick="press()">Go to Top</button>
<script>
function press(){
  $("html, body").animate({scrollTop: "0"}, 3000);
}
</script>

Ausgabe: