Silas Köhler

Webentwicklung

Scroll-Animation für Anchor Links mit CSS

Silas Köhler

|

Ein weiteres Stück meines Javascript-Codes wird durch modernes CSS überflüssig. Mit nur einer Zeile CSS lässt sich eine sanfte Animation für Anchor-Links realisieren.

Code-Snippet

html {
     scroll-behavior: smooth;

     * {
         scroll-margin-top: 85px;
     }
}

@media (prefers-reduced-motion: reduce) {
     html {
         scroll-behavior: auto;
     }
}Code-Sprache: SCSS (scss)

Warum funktioniert das?

scroll-behavior: smooth wird inzwischen von allen modernen Browsern unterstützt. Und es bewirkt genau das, was es verspricht. Das Browserfenster scrollt bei einem Klick auf einen Anchor-Link zur entsprechenden Stelle. Das funktioniert übrigens auch, wenn man sich per Tabulator auf einen Link außerhalb des aktuellen Sichtbereiches bewegt.

scroll-margin-top legt fest, wie viel Pixel über dem Ziel das Fenster zum Halten kommt. Das ist hilfreich, wenn du eine fixe Navigationsleiste nutzt. Im obigen Beispiel ist diese 85px hoch. Falls du keine fixe Navigationsleiste nutzt, kannst du scroll-margin-top einfach weglassen.

Tipp: Klicke in der Sidebar (Table of Contents) auf einen Link, um sanft zur entsprechenden Überschrift unten zu scrollen.

Inhalt