How can implement smooth scrolling on a webpage using jQuery?

Question

Aryan Kumar · Answer

There are two ways to implement smooth scrolling on a webpage using jQuery:

Using the scroll-behavior property

The scroll-behavior property can be used to enable smooth scrolling for the whole page. To do this, add the following CSS code to your webpage:

Code snippet

html {
  scroll-behavior: smooth;
}

This will make the page scroll smoothly when you click on links or use the scrollbar.

Using the animate() method

The animate() method can be used to add smooth scrolling to specific elements on the page. To do this, add the following jQuery code to your webpage:

Code snippet

$("a").on("click", function(event) {
  // Prevent default anchor click behavior
  event.preventDefault();

  // Get the hash value of the clicked link
  var hash = this.hash;

  // Use the animate() method to scroll to the element with the specified hash
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 800);
});

This code will scroll the page smoothly to the element with the specified hash value when you click on a link. The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area.

Which method you use to implement smooth scrolling will depend on your specific needs. If you want smooth scrolling for the whole page, then you can use the scroll-behavior property. If you only need smooth scrolling for specific elements on the page, then you can use the animate() method.

forum

How can implement smooth scrolling on a webpage using jQuery?

Can you answer this question?

1 Answers