---
title: "How can implement smooth scrolling on a webpage using jQuery?"  
description: "How can implement smooth scrolling on a webpage using jQuery?"  
author: "Steilla Mitchel"  
published: 2023-06-09  
updated: 2023-06-10  
canonical: https://www.mindstick.com/forum/158695/how-can-implement-smooth-scrolling-on-a-webpage-using-jquery  
category: "jquery"  
tags: ["jquery", "jquery ui"]  
reading_time: 2 minutes  

---

# How can implement smooth scrolling on a webpage using jQuery?

How can implement [smooth scrolling](https://www.mindstick.com/forum/158257/how-to-use-jquery-to-implement-smooth-scrolling-between-different-sections-of-a-web-page) on a [webpage using jQuery](https://www.mindstick.com/forum/158693/how-can-fetch-data-from-a-server-and-dynamically-update-a-webpage-using-jquery)?

## Replies

### Reply by Aryan Kumar

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

1. **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

```plaintext
html {
  scroll-behavior: smooth;
}
```

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

1. **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

```plaintext
$("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.


---

Original Source: https://www.mindstick.com/forum/158695/how-can-implement-smooth-scrolling-on-a-webpage-using-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.