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

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.