Scrollen Sie zu Spezifisches Element in JavaScript
-
Verwenden Sie die Funktion
scroll(), um zu einem Element in JavaScript zu scrollen -
Verwenden Sie die Eigenschaft
href, um zu einem Element in JavaScript zu scrollen -
Verwenden Sie die Funktion
scrollIntoView(), um zu einem Element in JavaScript zu scrollen
Wir besprechen, wie Sie das angegebene Element in den sichtbaren Bereich des Browserfensters in verschiedenen Browsern mit JavaScript erhalten.
Die Methoden zum Ausführen dieser Aufgabe sind wie folgt.
Verwenden Sie die Funktion scroll(), um zu einem Element in JavaScript zu scrollen
Die Funktion scroll() der Elementschnittstelle scrollt zu einem bestimmten Satz von Koordinaten innerhalb eines gegebenen Elements. Dies ist für Chrome und Firefox geeignet und nicht für den Rest.
window.scroll(0, findPos(document.getElementById('myDiv')));
Das benötigte Element erhalten wir mit der Methode getElementById(). Wir übergeben dies in der Funktion scroll(), um zum gewünschten Element zu scrollen.
Verwenden Sie die Eigenschaft href, um zu einem Element in JavaScript zu scrollen
Hier können wir den Wert href so setzen, dass er auf einen Anker in der Webseite in JavaScript zeigt.
location.href = '#';
location.href = '#myDiv';
Dabei ist #myDiv die ID des benötigten <div>-Tags.
Verwenden Sie die Funktion scrollIntoView(), um zu einem Element in JavaScript zu scrollen
Die Funktion scrollIntoView() verschiebt das übergebene Element in den sichtbaren Bereich des Browserfensters. Dies ist am besten für IE-, Safari- und Edge-Benutzer geeignet.
Zum Beispiel,
document.querySelector('#myDiv').scrollIntoView({behavior: 'smooth'});
Die Eigenschaft behavior beschreibt, wie die Schriftrolle aussehen soll. In unserem Beispiel ist es auf smooth eingestellt. Diese Eigenschaft kann auch in der Funktion scroll() verwendet werden.