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

Simple CSS trick to create a smooth scrolling effect

nirazanbasnet profile image Nirazan Basnet Originally published at nirajanbasnet.com.np ・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);
});

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

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

pic
Editor guide
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

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
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
gloriousloaf profile image
David Metcalf

Does anyone know a good way to take advantage of CSS smooth-scroll within a single page website, but not append the #hash to the url?

Clicking anchor tags that point to & scroll to other content on the page can break the users' expected back button behavior. Some native JS to fix this issue would be awesome.

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.