Methode zum Scrollen des Fensters zu einem Element in JavaScript

Die Methode scrollIntoView scrollt das Fenster zu einem bestimmten Element. Die Methode wird auf das Element angewendet, zu dem gescrollt werden soll. Mit dem Parameter der Methode wird geregelt, wo sich das Element befinden soll: oben oder unten im Fenster.

Sehen wir uns Beispiele an. Scrollen wir das Fenster so, dass sich das Element oben im Fenster befindet:

elem.scrollIntoView(true);

Scrollen wir nun das Fenster so, dass sich das Element unten im Fenster befindet:

elem.scrollIntoView(false);

Man kann auch ein Objekt mit Einstellungen als Parameter übergeben. Scrollen wir das Fenster sanft zum Element:

elem.scrollIntoView({
	behavior: 'smooth',
});

Das Objekt mit den Einstellungen hat auch Optionen für die Ausrichtung der Seite in Bezug auf das Element. Die Einstellung block legt die vertikale Ausrichtung fest, und die Einstellung inline die horizontale. Sie können die folgenden Werte annehmen: 'start', 'center', 'end', 'nearest'.

Probieren wir es aus:

elem.scrollIntoView({
	behavior: 'smooth',
	block: 'start',
	inline: 'end',
});

Gegeben sind ein Element und ein Button. Beim Klick auf den Button scrollen Sie die Seite zu diesem Element. Probieren Sie alle beschriebenen Möglichkeiten aus.