Smooth scrolling anchor links with CSS
TL;DR Smooth scrolling triggered by anchor links is now achievable with just CSS (in some browsers) and can be turned off for users who prefer reduced motion.
The CSS property scroll-behavior tells the browser how to handle scrolling.
Available values:
auto(default) - jumps straight to the location on the pagesmooth- animated scrolling to the specified location on the page
html {
scroll-behavior: smooth;
}Prefers-reduced-motion
It's important to remember that there can be consequences to our choices. Adding smooth scrolling might be done to look nice, but for some this added motion could cause nausea or dizziness.
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}Smooth scrolling links with only CSS
My most popular open source project is Smooth Scroll, a script that lets you animate scrolling with anchor links.Today, I want to show you how to achieve the same effect with only CSS. I’ll also talk about when and why you might want to use a JavaScript version anyways.Scroll Behavior The scroll-b…
