Heim  >  Artikel  >  Web-Frontend  >  Wie scrolle ich mit JavaScript zu einem Element?

Wie scrolle ich mit JavaScript zu einem Element?

Susan Sarandon
Susan SarandonOriginal
2024-10-21 19:17:03495Durchsuche

How to Scroll to an Element Using JavaScript?

Wie scrolle ich mit JavaScript zu einem Element?

Mit der scrollIntoView()-Methode können Sie zu einem bestimmten Element auf einer Webseite scrollen. Diese Methode wird von allen gängigen Browsern unterstützt.

Um die scrollIntoView()-Methode zu verwenden, übergeben Sie einfach das Element, zu dem Sie scrollen möchten, als Argument an die Methode. Der folgende Code scrollt beispielsweise zum Element mit der ID „divFirst“:

document.getElementById("divFirst").scrollIntoView();

Die scrollIntoView()-Methode kann ein optionales zweites Argument annehmen, das angibt, wie das Element in die Ansicht gescrollt werden soll. Folgende Werte werden akzeptiert:

  • "auto": Das Element wird so weit wie möglich in die Ansicht gescrollt, ohne dass die Seite von seiner aktuellen Position wegscrollt.
  • "smooth": Das Element wird sanft mit einem Animationseffekt in die Ansicht gescrollt.
  • „bei Bedarf“: Das Element wird nur in die Ansicht gescrollt, wenn es nicht bereits sichtbar ist.

Der folgende Code scrollt beispielsweise reibungslos zum Element mit der ID „divFirst“:

document.getElementById("divFirst").scrollIntoView({behavior: "smooth"});

Sie können auch die scrollIntoView()-Methode verwenden, um zu einem bestimmten Offset innerhalb eines Elements zu scrollen. Übergeben Sie dazu ein Objekt mit den folgenden Eigenschaften als zweites Argument an die Methode:

  • "block": Der Versatz vom oberen Rand des Elements in Pixel.
  • „inline“: Der Versatz von der linken Seite des Elements in Pixel.

Zum Beispiel scrollt der folgende Code zum Element mit der ID „divFirst“ und versetzt es um 100 Pixel von oben und 50 Pixel von links:

document.getElementById("divFirst").scrollIntoView({block: 100, inline: 50});

Das obige ist der detaillierte Inhalt vonWie scrolle ich mit JavaScript zu einem Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn