Simple CSS trick to create a smooth scrolling effect

We use different jquery library or write plain vanilla javascript to achieve a smooth scrolling effect.

jQuery Syntax:

//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
  $('html,body').animate({scrollTop:$(location.hash).offset().‌​top}, 500);
});

I love CSS. And I wonder can we achieve this effect by using just CSS properties. Then I encounter this native CSS feature scroll-behavior.

The scroll-behavior property in CSS allows us to define whether the scroll location of the browser jumps to a new location or smoothly animates the transition when a user clicks a link that targets an anchored position within a scrolling box.

If you click a #hash link, the native behavior is for the browser to change focus to the element matching that ID. The page may scroll, but the scrolling is a side effect of the focus changing.

Example

html {
  scroll-behavior: smooth;
}

It also has a different syntax,

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

Just take a look at a sample HTML

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
</div>

CSS

html {
    scroll-behavior: smooth;
}

---

Browser compatibility

---

Conclusion

👏👏 By coming this far I hope you can use this awesome CSS smooth scrolling effect. So, I suggest you give it a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers

Comments

[Evaldas Buinauskas]

Oh God please don't. It's so annoying when sites override scroll behavior.

[Luis Augusto]

This only really affects how jump links work, if it's set to smooth it will scroll to the element instead of jumping to it. It doesn't affect the actual scrolling of a page.

[Elliot Derhay]

That makes me feel better.

[⚡ Nirazan Basnet ⚡]

Thanks :)

[Roman]

Definitely trying it out. Sounds like there wouldn't be a need for js or plugins when targeting a # within the page for smooth scrolling

[Bayu Angora]

Why there are so many smooth scroll plugin if we can use it with just one line CSS?

[Anton Korzunov]

It is not supported by all browsers right now, and was not supported by any browser in the jQuery times.

Even today smooth scroll is barely working even in chrome, or not working at all sometimes.

Please test before use.

[⚡ Nirazan Basnet ⚡]

CSS is advancing so from my personal view you can use this feature. Right now many browsers support it. You can check it on caniuse.com (caniuse.com/#search=scroll%20behavior). But yes make sure you test it before go on live on web.