0Pricing
CSS Academy · Lektion

scroll-behavior: smooth

Aktivieren Sie mit scroll-behavior flüssiges Scrollen für Ankerlinks und programmgesteuertes Scrollen.

scroll-behavior: smooth ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist scroll-behavior?

scroll-behavior legt fest, ob durch Navigation ausgelöstes Scrollen (Ankerlinks, JavaScript-scrollTo()) fließend animiert oder sofort ausgeführt wird.

scroll-behavior: smooth

Wenn Sie scroll-behavior: smooth am html- oder body-Element setzen, wird die Navigation über alle Ankerlinks der Seite fließend animiert:

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

Sofort oder fließend

Werte:

  • auto (Standard): sofortiger Sprung
  • smooth: animiertes Scrollen zum Ziel

Navigation über Ankerlinks

Bei aktiviertem fließendem Scrollen scrollt ein Klick auf einen Link wie <a href="#contact"> fließend zu dem Element mit id="contact", statt sofort dorthin zu springen.

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

JavaScript scrollTo() mit smooth

Übergeben Sie den Wert "smooth" als behavior an JavaScript-Scrollmethoden, um animiertes Scrollen zu erhalten:

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

Zusammenspiel mit prefers-reduced-motion

Fließendes Scrollen kann Reisekrankheit auslösen. Deaktivieren Sie es daher immer für Benutzer, die reduzierte Bewegung bevorzugen:

  <p>Respects <code>prefers-reduced-motion</code>.</p>

scroll-behavior bei Containern

Wenden Sie die Eigenschaft auf jeden scrollbaren Container an, nicht nur auf die Seite:

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

Einschränkungen

CSS scroll-behavior bietet keine Kontrolle über die Scroll-Dauer oder die Beschleunigungsfunktion. Für eine präzise Animationssteuerung verwenden Sie die Web Animations API von JavaScript oder Bibliotheken wie GSAP mit deren Scroll-Plugins.

scroll-padding-top für fixe Header

Wenn ein fixer Header die Ziele von Ankerlinks überlagert, fügt scroll-padding-top einen Versatz hinzu, damit das Ziel nicht hinter dem Header verborgen wird:

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin im Vergleich zu scroll-padding

scroll-margin fügt den Versatz direkt am Zielelement hinzu; scroll-padding fügt ihn am Scrollcontainer hinzu. Beide lösen das Problem mit fixen Headern:

  <div class="section">Section content</div>

Hinweis zur Barrierefreiheit

Fließendes Scrollen ist eine Verbesserung der Benutzererfahrung. Stellen Sie immer sicher, dass die Ankernavigation auch ohne diese Funktion funktioniert – verlassen Sie sich für die Funktionalität nicht auf das fließende Scrollverhalten, sondern verwenden Sie es nur für den visuellen Feinschliff.

Kurzer Test

Wie stellen Sie sicher, dass die fließende Scrollanimation für Benutzer mit vestibulärer Bewegungsempfindlichkeit deaktiviert wird?

Zusammenfassung

scroll-behavior: smooth am html-Element aktiviert fließendes, animiertes Scrollen für Ankerlinks und JavaScript-Scrollmethoden. Verwenden Sie scroll-padding-top, um Scrollziele vom Bereich hinter fixen Headern fernzuhalten. Deaktivieren Sie fließendes Scrollen aus Gründen der Barrierefreiheit immer innerhalb einer Media Query mit prefers-reduced-motion: reduce.

Häufig gestellte Fragen

Ist die Lektion „scroll-behavior: smooth“ kostenlos?

Ja — der vollständige Text von „scroll-behavior: smooth“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „scroll-behavior: smooth“?

Aktivieren Sie mit scroll-behavior flüssiges Scrollen für Ankerlinks und programmgesteuertes Scrollen. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „scroll-behavior: smooth“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. overflow: hidden, scroll, auto, clip
  2. scroll-behavior: smooth
  3. scroll-snap-type und scroll-snap-align
  4. Scrollbar-Styling mit ::-webkit-scrollbar
← Zurück zu CSS Academy