loading...
Cover image for 💨Super Quick CSS: Smooth Scrolling

💨Super Quick CSS: Smooth Scrolling

deadlybyte profile image Carl Saunders Updated on ・1 min read

Transform Your Website's UX With This One Liner

html {
  scroll-behavior: smooth;
}

If like me you've got a single page website and your using bookmarks (anchors tags that reference an element by id), allowing user to navigate to different sections of the website. Then you need to add this CSS property scroll-behavior: smooth;, which will smoothly scroll the page content into view.

Working Example

Below the CodePen demonstrates the smooth scrolling of the content when you click one of the navigation links.

Demo

Before - Without Smooth Scrolling

Before - Without Smooth Scrolling

After - With Smooth Scrolling

After - With Smooth Scrolling

Things To Note

The scroll-behavior property doesn't seem to work on the body element, so best to add it to the html element.

This property isn't currently support by all browsers, but this shouldn't stop you using it as it won't break and defaults to the standard behavior.

https://caniuse.com/#feat=mdn-css_properties_scroll-behavior

Posted on by:

deadlybyte profile

Carl Saunders

@deadlybyte

I'm a full stack software developer specialising in React. With 20+ years’ experience, I'm passionate about following best practices and standards.

Discussion

pic
Editor guide
 

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.

 

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
 

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.

Glad adding the GIFs cleared up what was happening.

 

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

caniuse.com/#search=scroll-behavior

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

 

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

 

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

 

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

 

That was nice, thank you!

 

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

 

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

 

No worries, glad you found it useful.