Sanftes Scrollen mit CSS scroll-behavior
Auf einen Anker-Link zu klicken und zu beobachten, wie die Seite sofort zu einem Abschnitt springt, wirkt abrupt. Es desorientiert Nutzer, unterbricht den Lesefluss und lässt die seiteninterne Navigation unausgereift erscheinen. Die Lösung ist eine einzige CSS-Eigenschaft – ganz ohne JavaScript-Bibliothek.
Wichtige Erkenntnisse
- Die CSS-Eigenschaft
scroll-behavior: smoothermöglicht animiertes Scrollen für Anker-Links und programmatische Scroll-APIs ohne jegliches JavaScript. - Wende sie auf das
html-Element an, nicht aufbody, damit sich die Eigenschaft korrekt auf den Viewport überträgt. - Die vom Browser gesteuerte Easing-Funktion und Dauer lassen sich nicht per CSS anpassen – greife nur dann zu JavaScript, wenn du feingranulare Kontrolle benötigst.
- Verwende
scroll-margin-top, um zu verhindern, dass fixierte Header die Ankerziele verdecken. - Verpacke die Regel in eine
prefers-reduced-motion: no-preference-Media-Query, um Barrierefreiheitseinstellungen zu respektieren.
Was ist scroll-behavior und wie funktioniert es?
Die CSS-Eigenschaft scroll-behavior steuert, wie sich ein scrollbarer Container bewegt, wenn das Scrollen programmatisch ausgelöst wird – über Anker-Links, Hash-Navigation oder JavaScript-Scroll-APIs wie window.scrollTo() oder element.scrollIntoView().
Sie akzeptiert zwei Werte:
auto— der Standardwert. Scrollt ohne Animation sofort.smooth— animiert das Scrollen mit einer vom Browser definierten Easing-Funktion und Dauer.
Eine wichtige Klarstellung: scroll-behavior beeinflusst nicht das durch Mausrad, Trackpad oder Scrollbar-Drag ausgelöste Scrollen des Nutzers. Es gilt ausschließlich für anker- und programmgesteuertes Scrollen.
Easing und Dauer werden vollständig vom Browser bestimmt. Du kannst sie nicht allein mit CSS anpassen. Wenn du eine bestimmte Dauer oder eine eigene Easing-Kurve benötigst, ist eine JavaScript-basierte Lösung erforderlich.
CSS-Smooth-Scrolling zu deiner Seite hinzufügen
Wende scroll-behavior: smooth auf das html-Element an, um sanftes Scrollen für die gesamte Seite zu aktivieren:
html {
scroll-behavior: smooth;
}Verwende html, nicht body. Wenn die Eigenschaft auf dem Wurzelelement gesetzt ist, gilt sie für den Viewport. Auf body gesetzt, überträgt sie sich nicht auf den Viewport – eine häufige Ursache für Verwirrung, wenn das Smooth Scrolling nicht funktioniert.
Diese einzelne Deklaration kümmert sich automatisch um das gesamte Anker-Link-Scrolling. Kein JavaScript, keine Abhängigkeiten.
Praktische Anwendungsfälle
Inhaltsverzeichnis-Navigation:
<nav>
<a href="#intro">Introduction</a>
<a href="#usage">Usage</a>
<a href="#examples">Examples</a>
</nav>„Zurück nach oben”-Button:
<a href="#top">↑ Back to top</a>Damit der „Zurück nach oben”-Link ganz oben landet, sorge dafür, dass ein Element mit id="top" am Seitenanfang existiert, oder nutze href="#" als Fallback. Beide Muster funktionieren sofort, sobald scroll-behavior: smooth auf html gesetzt ist.
Umgang mit fixierten Headern via scroll-margin-top
Wenn dein Layout einen fixierten Header enthält, scrollen Ankerziele teilweise dahinter. Beheben lässt sich das mit scroll-margin-top:
:target {
scroll-margin-top: 80px; /* match your header height */
}Für eine umfassendere Abdeckung – einschließlich programmatischem Scrollen zu Elementen, die nicht das aktuelle :target sind – wende die Regel direkt auf die Sektionselemente selbst an:
section[id] {
scroll-margin-top: 80px;
}Damit verschiebt sich der Landepunkt des Browsers beim Navigieren zu einem Zielelement – ganz ohne JavaScript.
Discover how at OpenReplay.com.
Barrierefreiheit: prefers-reduced-motion respektieren
Manche Nutzer leiden unter Bewegungsübelkeit oder vestibulären Beschwerden, die durch animiertes Scrollen ausgelöst werden. Respektiere immer die Media Query prefers-reduced-motion:
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}Dieses Muster aktiviert sanftes Scrollen nur für Nutzer, die Bewegungen in ihren Betriebssystemeinstellungen nicht deaktiviert haben. Es ist die empfohlene Vorgehensweise für eine barrierefreie Scroll-UX.
Browser-Unterstützung
scroll-behavior wird von allen modernen Browsern flächendeckend unterstützt – Chrome 61+, Firefox 36+, Edge 79+, Safari 15.4+ und Opera 48+. Die globale Unterstützung liegt bei rund 95 %, sodass für aktuelle Projekte kein Polyfill nötig ist.
CSS vs. JavaScript: Was solltest du verwenden?
| Anforderung | Beste Vorgehensweise |
|---|---|
| Einfaches Anker-Link-Scrolling | CSS |
| Eigene Dauer oder Easing-Funktion | JavaScript |
| Bedingtes oder logikgesteuertes Scrollen | JavaScript |
Für die meisten Szenarien seiteninterner Navigation – Dokumentationsseiten, Landingpages, Portfolios – reicht CSS aus und ist die bevorzugte Wahl. Weniger Code, keine Abhängigkeiten, native Browser-Performance.
Schnelle Implementierungs-Checkliste
- ☐ Wende
scroll-behavior: smoothaufhtmlan, nicht aufbody - ☐ Verpacke es in
prefers-reduced-motion: no-preference - ☐ Ergänze
scroll-margin-topbei Layouts mit fixiertem Header - ☐ Teste Anker-Links und Tastaturnavigation
- ☐ Überprüfe das Verhalten in iOS Safari
Fazit
CSS-Smooth-Scrolling gehört zu jenen Verbesserungen, die praktisch nichts in der Umsetzung kosten und die seiteninterne Navigation sofort durchdachter wirken lassen. Eine korrekt platzierte Deklaration deckt den Großteil realer Anwendungsfälle ab, ohne dass JavaScript ins Spiel kommen muss.
FAQs
Die Eigenschaft scroll-behavior muss auf dem scrollbaren Container gesetzt werden, der den Viewport besitzt – das ist das html-Element. Wird sie auf body angewendet, überträgt sich der Wert nicht auf den Viewport-Scroller, sodass das Anker-Link-Scrolling auf den standardmäßigen Sofortsprung zurückfällt. Verschiebe die Regel auf html, und die sanfte Animation funktioniert wie erwartet.
Nein. Die Animationsdauer und die Easing-Kurve werden vollständig vom Browser bestimmt und lassen sich nicht über CSS anpassen. Wenn dein Design eine bestimmte Geschwindigkeit oder eine eigene Easing-Funktion erfordert, brauchst du eine JavaScript-Lösung mit window.scrollTo und behavior smooth in Kombination mit eigener Animationslogik – oder eine kleine Bibliothek, die das Timing manuell übernimmt.
Nein. Die Eigenschaft gilt nur für programmgesteuertes und ankerausgelöstes Scrollen, etwa das Klicken auf einen Hash-Link, das Aufrufen von scrollIntoView oder den Aufruf von window.scrollTo. Vom Nutzer initiiertes Scrollen per Mausrad, Trackpad-Gesten, Scrollbar-Drag oder Pfeiltasten bleibt unberührt und nutzt weiterhin das native Scroll-Verhalten des Browsers.
Verwende die Eigenschaft scroll-margin-top auf dem Zielelement mit einem Wert, der deiner Header-Höhe entspricht. Setzt du beispielsweise scroll-margin-top auf 80px bei section-Elementen mit einer id, wird die Scroll-Landeposition so verschoben, dass die Sektion unterhalb des fixierten Headers erscheint, anstatt dahinter verborgen zu sein. Weder JavaScript noch zusätzliches Markup sind erforderlich.
Gain control over your UX
See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
