Smooth scrolling: Implement it with CSS only

What is smooth scrolling?

Smooth scrolling is something you probably encounter while browsing every single day. It’s a modern feature that many websites have. The feature is triggered when a site visitor clicks some link which navigates to the other section on the same page. We are not talking about regular links which help us browsing through the different site’s pages. A short definition would be that smooth scrolling animates to the scroll position, instead of a straight jump.

The jQuery way to enable smooth scrolling

jQuery is probably the most popular way of achieving this, especially amongst freelance WordPress developers. And it will take some time until newly CSS trick become supported by all modern browsers. To have this feature on your website, you should write something like this:

$(document).ready(function(){
  // Add smooth scrolling everywhere
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
      var hash = this.hash;

      // The optional number (400) specifies the number 
      // of ms it takes to scroll to the specific place
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 400, function(){
        window.location.hash = hash;
      });
    }
  });
});

Although this seems like too much code to achieve a pretty simple functionality, the actual production code should be even more complicated. Something which is often ignored is the accessibility. It’s a fact that when you trigger a smooth scrolling, the default browser’s behavior is changing the focus to that HTML element (for example, to #intro-section). You must handle those focus changes by yourself to grant the best possible user experience.

Is this really possible to accomplish with CSS only?

Yes! It’s possible and it’s quite simple! CSS introduced a new scroll-behavior property. Let’s see it in the action! All you need is to apply the new property to an HTML element. We’ll do it on “body” element to achieve exactly the same thing as we did with jQuery.

body {
  scroll-behavior: smooth;
}

If you’re waiting for additional steps, I must disappoint you. There are no further steps to apply. The CSS solution is a less complex and fairly shorter!

A default value for the scroll-behavior property is “auto”. Actually, this is a default browser’s behavior and it produces a straight jump to the HTML element.

Awesome, let’s replace old JS way with this simple CSS solution now!

Absolutely NO! There’s no rush here! Although this is something which will happen in the near future, you shouldn’t act just straight away. Just as all new stuff, the scroll-behavior property is not fully compatible with all modern browsers. At the time of this writing, it’s supported by Google Chrome, Mozilla Firefox, and Opera. However, this property won’t work on Safari and Microsoft Edge. As a web developer, I must be sure that all solutions I create are cross-browser compatible. Unfortunately, this is still not the case with this approach, and we have to wait for a while.