DEV Community

Cover image for Simple CSS trick to create a smooth scrolling effect
⚡ Nirazan Basnet ⚡ for IntegridSolutions

Posted on • Updated on • Originally published at

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){     
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);

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

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.


html {
  scroll-behavior: smooth;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Just take a look at a sample HTML

  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
<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>
Enter fullscreen mode Exit fullscreen mode


html {
    scroll-behavior: smooth;
Enter fullscreen mode Exit fullscreen mode

Browser compatibility

Browser compatibility for smooth scroll


👏👏 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

Top comments (8)

buinauskas profile image
Evaldas Buinauskas

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

luisaugusto profile image
Luis Augusto • Edited

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.

jsn1nj4 profile image
Elliot Derhay

That makes me feel better.

Thread Thread
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡

Thanks :)

romandesigns profile image

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

bayuangora profile image
Bayu Angora

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

thekashey profile image
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.

nirazanbasnet profile image
⚡ 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 ( But yes make sure you test it before go on live on web.