How to create a smooth scrolling effect

How to create a smooth scrolling effect in CSS, JavaScript & JQuery

Learn how to use CSS and JavaScript to create a smooth scrolling effect. A smooth scroll improves the user experience on your website. Instead of rapid jumps, clicking on links that connect to elements on the same page creates a fluid scroll.

We’ll start with a pure CSS solution for this feature and then move on to a standard jQuery method. After that, we’ll get rid of jQuery and talk about pure JavaScript alternatives and different libraries.

Read also: How to create a scroll indicator in HTML, CSS & JavaScript.

Add a Smooth scrolling effect using pure CSS

To enable smooth scrolling for the entire page, add scroll-behavior: smooth; to the <html> element. This is the simplest method to add a smooth scrolling effect on web pages.

html {
  scroll-behavior: smooth;
}

The browser version that fully supports the CSS property (scroll-behavior: smooth;) is indicated by the numbers in the table.

PropertyChromeEdgeFirefoxSafariOpera
scroll-behavior61.079.036.014.048.0

Create a smooth scrolling effect using vanilla JavaScript

Some of the old browsers are not supporting the CSS scroll-behavior: smooth; property. Then there is a simple JavaScript Solution.

DOM items are scrolled into view using the scrollIntoView() function. This accepts the behavior attribute with the value set to smooth as well.

// get the links
const links = document.querySelectorAll(".your-hyperlink-class");
 
// iterate over selected links and add event listeners
for (const link of links) {
  link.addEventListener("click", clickHandler);
}
 
function clickHandler(e) {
  e.preventDefault();
  
  // extract the link
  const theLink = this.getAttribute("href");
 
   // apply smooth scroll effect
  document.querySelector(theLink).scrollIntoView({
    behavior: "smooth"
  });
}

If you need to scroll to the top and bottom of the web page then the scrollIntoView() method scrolls an element into the browser window’s visible region.

const element = document.getElementById("content");

function scrollToTop() {
  element.scrollIntoView(true);
}

function scrollToBottom() {
  element.scrollIntoView(false);
}

// code source: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

Using JQuery

We’ll stick to the simple jQuery technique. With that in mind, we’ll use jQuery’s animation() method to provide seamless scrolling.

$(document).ready(function(){

  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

// code source: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

Create a smooth scrolling effect using JavaScrip Libraries

ScrollReveal

smooth scrolling effect using ScrollReveal

ScrollReveal is a JavaScript library that makes it simple to animate components as they enter and exit the viewport. It was built to be tough and adaptable, but you’ll be surprised at how simple it is to use once you get the hang of it.

Here is a simple example:

<h1 class="headline">
    Widget Inc.
</h1>
ScrollReveal().reveal('.headline');

WOW.js

WOW.js Screenshot

When you scroll down, WOW will unveil Animate.css animations. You may configure the length, delays, offsets, and iterations of the animation right in the HTML markup, then simply call the element’s class from JS.

  <section class="wow slideInLeft"></section>
  <section class="wow slideInRight"></section>
new WOW().init();

ScrollMagic

ScrollMagic

ScrollMagic is a plugin-based architecture that offers easy customizability and extendability.

When a user scrolls down the page, this plugin will display a ‘Magical’ effect. It’s ideal for animating, pinning elements, and switching CSS classes based on scroll position. 

jQuery AniView

A jQuery plugin that works in conjunction with animate.css to only show animations when content is visible. It is a lightweight (under 1KB) jQuery plugin that lets you add animations to your web pages.

$('.aniview').AniView();
var options = {
    animateClass: 'animated', // for v3 or 'animate__animated' for v4
    animateThreshold: 100,
    scrollPollInterval: 20
}
$('.aniview').AniView(options);

Conclusion

We looked at several CSS, JQuery, and JavaScript approach for achieving smooth scrolling.

I hope you enjoyed this exercise and learned something new about front-end development.