Mit JavaScript zu einem Element scrollen

JavaScript zu Element scrollen: scrollIntoView-Optionen live | We.Inc

Teste jede scrollIntoView-Option in einer Live-Box, behebe mit scroll-margin-top Überschriften, die unter einem Sticky Header verschwinden, und kopiere Smooth-Scroll-Code in JavaScript und reinem CSS.

Mit JavaScript zu einem Element scrollen

Rufe element.scrollIntoView({ behavior: 'smooth', block: 'start' }) auf, um ein Element in den sichtbaren Bereich zu holen. block legt fest, wo es vertikal landet: start, center, end oder nearest. Wenn ein Sticky Header das Ziel verdeckt, gib dem Ziel in CSS ein scroll-margin-top in Höhe des Headers, statt Offsets in JavaScript zu berechnen.

Optionen von scrollIntoView

Option
Werte
Standard

"smooth", "instant", "auto" (folgt CSS scroll-behavior)
"auto"

block (vertikal)
"start", "center", "end", "nearest"
"start"

inline (horizontal)
"start", "center", "end", "nearest"
"nearest"

true / false statt Optionen
true = block start, false = block end (inline nearest)

Es gibt drei Wege, die Seite zu einem Element zu bewegen: scrollIntoView auf dem Element, scrollTo mit einer Pixelposition und ein einfacher Link auf eine id. Die Spielwiese zeigt, was jeder block-Wert bewirkt und wie scroll-margin-top eine Überschrift von einer fixierten Leiste freihält. Danach decken die Beispiele den Code ab, den du für Menüs, Formularfehler und Listen im Chat-Stil brauchst.

Wähle eine Zielzeile und einen block-Wert und drücke dann Scrollen. Nur die Demo-Box bewegt sich, diese Seite bleibt, wo sie ist.
Erhöhe den Scroll-Abstand passend zur grauen Sticky-Leiste und sieh zu, wie das Ziel knapp darunter stoppt.
Wechsle behavior zwischen smooth und instant, um beides zu vergleichen.
Kopiere den erzeugten scrollIntoView-Aufruf und die CSS-Regel für deine eigene Seite.

scroll-margin-top gilt auch, wenn jemand einen Link auf #section öffnet, eine CSS-Regel behebt also sowohl Klicks als auch geteilte URLs.
Nutze block: 'nearest' für die Tastaturnavigation durch eine Liste. Es scrollt nur so weit wie nötig und tut nichts, wenn der Eintrag schon sichtbar ist.
Sanftes Scrollen über eine lange Seite kann sich langsam anfühlen. Setze html { scroll-behavior: smooth } in eine Media Query prefers-reduced-motion: no-preference, damit Leute, die weniger Bewegung wünschen, sofort springen.
scrollIntoView bewegt jeden scrollbaren Vorfahren, auch die Seite. Wenn sich nur ein inneres Panel bewegen soll, setze stattdessen scrollTop dieses Panels oder rufe panel.scrollTo auf.

Häufige Fragen

Wie scrolle ich mit einem Offset für einen fixierten Header zu einem Element?

Ergänze scroll-margin-top am Ziel, zum Beispiel h2 { scroll-margin-top: 80px }. Die CSS-Scroll-Snap-Spezifikation verlangt von Browsern, diesen Abstand bei scrollIntoView und bei Links auf #ids zu berücksichtigen, auch wenn gar kein Snapping verwendet wird.

Wie mache ich das Scrollen sanft?

Übergib behavior: 'smooth' an scrollIntoView oder scrollTo oder setze scroll-behavior: smooth am html-Element, damit jedes programmatische Scrollen und jeder Link innerhalb der Seite animiert wird. scroll-behavior wirkt nicht auf Scrollen, das der Nutzer mit Mausrad oder Touch auslöst.

Was ist der Unterschied zwischen scrollIntoView und scrollTo?

scrollIntoView geht von einem Element aus und berechnet die Position für dich. window.scrollTo({ top, behavior }) springt zu einer exakten Pixelposition, und scrollBy bewegt um einen relativen Betrag. Nutze scrollTo, wenn du schon eine Zahl hast, etwa um zu einer gespeicherten Position zurückzukehren.

Wie scrolle ich an den Anfang der Seite?

window.scrollTo({ top: 0, behavior: 'smooth' }). Bei einem scrollbaren Panel rufst du dieselbe Methode auf dem Panel-Element statt auf window auf.

Warum macht scrollIntoView nichts?

Häufige Ursachen sind ein Aufruf, bevor das Element existiert (führe ihn nach dem Rendern aus, etwa in einem React-Effect), ein Element mit display: none oder die Option nearest bei einem Element, das bereits vollständig sichtbar ist.

Einen block-Wert wählen

start passt für Sprünge zu einem Abschnitt oder einer Überschrift, weil der Leser oben beginnt. center eignet sich gut, um Aufmerksamkeit auf ein einzelnes Feld zu lenken, etwa die erste ungültige Eingabe in einem Formular. end passt zu einem Chat oder Log, in dem der neueste Eintrag unten stehen soll.
nearest ist die zurückhaltende Option: Sie bewegt nur die nötige Mindeststrecke und lässt sichtbare Einträge in Ruhe, genau das, was du willst, wenn eine Pfeiltaste die Markierung durch eine Liste bewegt.

Ganz ohne JavaScript

Ein gewöhnlicher Link wie <a href="#pricing"> scrollt bereits zum Element mit der id pricing, aktualisiert die Adressleiste und funktioniert mit dem Zurück-Button. Ergänze scroll-behavior: smooth am html-Element und scroll-margin-top an den Zielen, und viele Inhaltsverzeichnis-Menüs brauchen überhaupt kein Skript.
Greif zu JavaScript, wenn das Scrollen auf etwas folgt, das kein Klick auf einen Link ist: ein Formular, das die Validierung nicht besteht, eine neue Nachricht oder ein ausgewähltes Suchergebnis.

Code zum Scrollen zu einem Element

Sanft zu einem Abschnitt scrollen

Sucht das Element über seine id und bringt seine Oberkante an den oberen Rand der Ansicht.

Offset für Sticky Header in CSS

Eine Regel behebt die Überdeckung für Scrollen per Skript und für Links, die auf #id enden. Die Media Query lässt die Animation für Leute weg, die reduzierte Bewegung bevorzugen.

Das erste ungültige Feld in den sichtbaren Bereich holen

center hält das Feld und sein Label in der Mitte des Bildschirms, und focus bringt auch Tastaturnutzer dorthin.

Nur innerhalb eines Panels scrollen

Nutzt die Position des Eintrags innerhalb des Panels, sodass sich die Seite drumherum nicht bewegt.

React: zu einer Ref scrollen

Die Ref zeigt erst nach dem Rendern auf den DOM-Knoten, daher erfolgt der Aufruf in einem Klick-Handler oder einem Effect.

scrollIntoView-Spielwiese

Diese Box hat ihre eigene Sticky-Leiste. Wähle eine Zeile und Optionen und scrolle dann. Die Box wendet dieselbe Ausrichtungsberechnung mit scrollTo an, der Rest der Seite bleibt also still.

Zielzeile: {n}

scroll-margin-top: {n}px

Scrollen

Zurück zum Anfang der Box

Sticky-Leiste, 40px hoch

Zeile {n}

Demo-Scrollbox

Code für deine Seite

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap