Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie scrolle ich mit JavaScript zu einem Element?

Susan Sarandon
Freigeben: 2024-10-21 19:17:03
Original
491 Leute haben es durchsucht

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();
Nach dem Login kopieren

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"});
Nach dem Login kopieren

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});
Nach dem Login kopieren

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!

Quelle:php
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!