QuickTip: Smooth scrolling effect with pure CSS only
Smooth scrolling does not require JavaScript. Here is a CSS only solution:
html { scroll-behavior: smooth; } /* We turn off smooth scrolling for people who have a browser/OS setting to reduce motion effects (e.g. people with motion sickness). */ @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
If you only want this behavior inside a container, apply it to that element. Otherwise, apply it to the whole document.
Caveats
- At the time of writing this, the
scroll-behavior
property works in Chrome and Firefox, but not in Edge, IE, or Safari (desktop or mobile). Check the current status here on caniuse.com. - There is no easing or timing support. If you want to control how fast the animation runs, or the easing pattern in which it animates, you need JavaScript.
- A JavaScript solution can get you more broad browser support.