Du dachtest smoothes Scrollen auf deiner Webseite ist nur mit Javascript möglich? Ich zeige dir, wie du ganz einfach eine bessere Nutzererfahrung durch smoothes Scrollen mit reinem CSS schaffen kannst. Und dafür brauchst es wirklich nur eine Zeile Code.
Smoothes Scrollen ist wichtig für die User Experience
Weiches Scrollen zu Ankerpunkten ist nicht einfach nur ein schöner Effekt. Während ein harter Sprung dem Nutzer kurzzeitig die Orientierung nimmt, spiegelt weiches Scrollen die Struktur der Seite und die Position aller Elemente deutlicher wieder.
Während dieses Scroll-Verhalten vor ein paar Jahren noch mit ein wenig mehr Mühe durch Javascript erzeugt wurde, ist es inszwischen sehr leicht umzusetzen. Alles was du benötigst, ist folgende Eigenschaft.
html {
scroll-behavior: smooth;
}
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft scroll-behavior vollständig unterstützt.
| 61.0 | 36.0 | 79.0 | – |
Nicht unterstützende Browser führen den internen Link normal als Sprung aus.
Beispiel
Um das smoothe Scrollen auf der gesamten Seite zu Verwenden musst du den HTML-Dom ansprechen, damit es den ganzen Viewport betrifft. Es nur dem Body zu geben, funktioniert leider nicht. Das Verhalten lässt sich aber auch auf einzelne Blöcke anwenden.
Siehe folgendes Beispiel: