Window.scroll() — Methode · JavaScript-Referenz

Signatur

Window.prototype.scroll(x-coord, y-coord) | Window.prototype.scroll(options)

Beschreibung

window.scroll() setzt die Scroll-Position des Fensters auf absolute Koordinaten relativ zur linken oberen Ecke des Dokuments. Die Methode verhält sich genauso wie window.scrollTo() – beide Namen sind Aliase. Wer relativ zur aktuellen Position scrollen will, verwendet stattdessen window.scrollBy().

Es gibt zwei Aufrufformen: die klassische mit zwei Zahlen scroll(x, y) und die modernere mit einem Options-Objekt scroll({ top, left, behavior }). Nur die Objekt-Variante erlaubt über behavior: "smooth" ein weiches, animiertes Scrollen, ohne dass man selbst mit requestAnimationFrame animieren muss.

Typische Einsatzfälle sind „Nach oben"-Buttons, das Wiederherstellen einer gespeicherten Scroll-Position (z. B. in Single-Page-Apps nach einem Routenwechsel) oder das Anspringen einer berechneten Position, etwa unter Berücksichtigung eines fixierten Headers. Werte außerhalb des scrollbaren Bereichs werden vom Browser automatisch auf den gültigen Bereich begrenzt.

Parameter

Name	Typ	Default	Beschreibung
$x-coord	number		Horizontale Zielposition in CSS-Pixeln, gemessen vom linken Rand des Dokuments. Nur in der Zwei-Argument-Form.
$y-coord	number		Vertikale Zielposition in CSS-Pixeln, gemessen vom oberen Rand des Dokuments. Nur in der Zwei-Argument-Form.
$options	ScrollToOptions	{}	Objekt mit optionalen Eigenschaften: `top` (vertikale Position), `left` (horizontale Position) und `behavior` (`"auto"`, `"instant"` oder `"smooth"`). Fehlende Achsen bleiben unverändert.

Beispiele

Einfach an eine Position springen

// Sofort 500 px nach unten, ganz links
window.scroll(0, 500);
console.log(window.scrollY);

500 (sofern das Dokument hoch genug ist)

„Nach oben“-Button mit weichem Scrollen

const button = document.querySelector('#nach-oben');

button.addEventListener('click', () => {
  window.scroll({ top: 0, left: 0, behavior: 'smooth' });
});

// Button erst ab 300 px Scrolltiefe einblenden
window.addEventListener('scroll', () => {
  button.hidden = window.scrollY < 300;
}, { passive: true });

Zu einem Abschnitt scrollen und fixierten Header berücksichtigen

const scrollToSection = (selector, headerOffset = 80) => {
  const target = document.querySelector(selector);
  if (!target) return;
  // getBoundingClientRect ist relativ zum Viewport, daher aktuelle Position addieren
  const top = target.getBoundingClientRect().top + window.scrollY - headerOffset;
  window.scroll({ top, behavior: 'smooth' });
};

scrollToSection('#kontakt');

Scroll-Position speichern und wiederherstellen

// Vor dem Verlassen der Seite speichern
window.addEventListener('pagehide', () => {
  sessionStorage.setItem('scrollPos', JSON.stringify({ x: window.scrollX, y: window.scrollY }));
});

// Beim Laden wiederherstellen
window.addEventListener('load', () => {
  const saved = sessionStorage.getItem('scrollPos');
  if (saved) {
    const { x, y } = JSON.parse(saved);
    window.scroll({ left: x, top: y, behavior: 'instant' });
  }
});

// Wichtig · Fallstricke

Absolut statt relativ: scroll() und scrollTo() sind identisch. Für relatives Scrollen nimmt man scrollBy().
Kein Promise: Weiches Scrollen läuft asynchron ab. Code direkt nach dem Aufruf sieht noch die alte Position. Das Ende erkennt man am scrollend-Event (in Safari erst seit Kurzem unterstützt).
CSS scroll-behavior: Wenn behavior fehlt oder "auto" ist, gilt der CSS-Wert von scroll-behavior auf dem Wurzelelement. Mit "instant" lässt sich das erzwingen.
Barrierefreiheit: Bei prefers-reduced-motion: reduce sollte man auf behavior: "smooth" verzichten.
Kompatibilität: Die Zwei-Zahlen-Form wird überall unterstützt. Das Options-Objekt und smooth fehlen im Internet Explorer und in alten Safari-Versionen (vor 15.4). Dort wird ein Objekt entweder ignoriert oder führt zu einem harten Sprung.
Scrollt nur das Fenster bzw. den Viewport. Für scrollbare Container gibt es Element.scroll(). Um ein Element in den sichtbaren Bereich zu holen, nimmt man Element.scrollIntoView().
Wer scroll() in schneller Folge aufruft, zum Beispiel in einem scroll-Handler, erzeugt ruckelnde Animationen oder Endlosschleifen.

Siehe auch

Window.scrollTo() Window.scrollBy() Window.scrollY Window.scrollX Element.scrollIntoView() Element.scroll()