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

Posted on May 16 by:

nirazanbasnet profile

Nirazan Basnet

@nirazanbasnet

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

IntegridSolutions

We love what we do and we love helping others succeed at what they love to do. We focus on Web Design - Development, Marketing &amp; Branding.

Discussion

markdown guide
 

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

 

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.

 
 

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

 

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

 

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.

 

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.