Smooth scrolling effect using css

To add a smooth scrolling effect to an html page you use
the scroll-behavior: smooth;
css rule.
html {
scroll-behavior: smooth;
}

Thanks for reading.

Comments

[Kyle Griffin]

I think the immediate issue with "smooth scrolling" as a term is that it really implies the interaction with the scroll wheel and the window position. What smooth scrolling really does is affect how the user is anchored around the page with links.
If "anchor" is the ubiquitous term for internal links on a page, then shouldn't this CSS property be "anchor-behaviour"? The same applies for JS scrollTo which has the same issue.

[Tejumade Adetunji]

I never thought of it like this.

[Kyle Griffin]

I personally am not fan of "scroll jacking", as it's bad UX. But I understand how some designs only work when the scroll is managed by JS (like fullpage.js or parallax). But it would be nice to set the scroll on pages as uniform to all browsers, as edge/safari scrolls differently to chrome and firefox. Oh well!

[Thomas Bnt]

Thanks ! Very useful for not using a extern library or JQuery !