DEV Community

loading...
Cover image for Simple CSS trick to create a smooth scrolling effect
IntegridSolutions

Simple CSS trick to create a smooth scrolling effect

Nirazan Basnet
Exploring the new tools and techniques on frontend development. Loves to meet up with new people and participate in the community. I do interesting stuff on codepen https://codepen.io/nirazanbasnet
Originally published at nirajanbasnet.com.np Updated on ・2 min read

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);
});
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.

Example

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

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

CSS

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

Browser compatibility

Browser compatibility for smooth scroll


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

Discussion (8)

Collapse
buinauskas profile image
Evaldas

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

Collapse
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.

Collapse
jsn1nj4 profile image
JSn1nj4‍‍👨‍💻

That makes me feel better.

Thread Thread
nirazanbasnet profile image
Nirazan Basnet Author

Thanks :)

Collapse
romandesigns profile image
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

Collapse
bayuangora profile image
Bayu Angora

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

Collapse
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.

Collapse
nirazanbasnet profile image
Nirazan Basnet Author

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.