DEV Community

Cover image for đź’¨Super Quick CSS: Smooth Scrolling

đź’¨Super Quick CSS: Smooth Scrolling

Carl Saunders on January 22, 2020

Transform Your Website's UX With This One Liner html { scroll-behavior: smooth; } Enter fullscreen mode Exit full...
Collapse
 
bakercode profile image
Beicker

I was playing with your code (on codepen.io) and i didn't see any difference between using that line and not using it. I don't know, maybe i am too noob or my browser (chrome) is the problem.

In the second case, Âżwhat browser can i use for it? Thanks for repplying me.

Collapse
 
deadlybyte profile image
Carl Saunders • Edited

I've added some animated gifs to show the before and after UX of applying the scroll-behavior: smooth property. Hopefully this'll make it clearer if your browser doesn't support this feature.

After - With Smooth Scrolling

After - With Smooth Scrolling
Collapse
 
bakercode profile image
Beicker

Oh i get it. What i was doing is scrolling with my mouse. I didn't clicked the links. I already see the difference. Thanks for the GIFs.

Thread Thread
 
deadlybyte profile image
Carl Saunders

Glad adding the GIFs cleared up what was happening.

Collapse
 
hungnguyenkt profile image
Hung Nguyen Manh • Edited

You should try again <3
scroll-behavior supported Chrome and Firefox.

caniuse.com/#search=scroll-behavior

developer.mozilla.org/en-US/docs/W...

Collapse
 
hnnx profile image
Nejc

I tried chrome mobile and desktop and it works - I wonder why the effect persists even if you remove it though

Collapse
 
deadlybyte profile image
Carl Saunders

Did you make the changes via CodePen or locally? As could be a caching issue. My other CodePen without the property works as expected.

Collapse
 
zenzenzen profile image
ohmyzense

I love this! Thanks so much for the share on this little tip.

Collapse
 
mdhesari profile image
Mohammad Fazel

That was nice, thank you!

Collapse
 
deadlybyte profile image
Carl Saunders • Edited

No worries, wish everything was this simple to implement. There's really no excuse not to implement this.

Collapse
 
lamka02sk profile image
lamka02sk

Thank you for the article! Never heard of this cool feature before.

Collapse
 
deadlybyte profile image
Carl Saunders

No worries, glad you found it useful.