How To Do Smooth Scrolling Effect

Creating a smooth scrolling effect can enhance the user experience on a webpage. In this tutorial, we will learn how you can implement a smooth scrolling effect using CSS, JavaScript, Or jQuery.

Know that there is a built-in CSS feature for this, scroll-behavior before you get too deep into the rabbit hole of JavaScript-based smooth scrolling.

What is the scroll-behavior property in CSS?

The scroll-behavior property in CSS is used to control the scrolling behavior when a user clicks on a link that targets an element within the same page. It’s primarily used to create smooth scrolling effects. This property was introduced in CSS3 and provides a simple way to enhance the user experience when navigating a webpage.

The scroll-behavior property can take one of the following values:

1. auto: This is the default value. The browser’s default scrolling behavior is used, which may or may not be smooth depending on the browser.
2. smooth: When set to smooth, scrolling will be animated and smooth. The scroll animation is controlled by the browser, and it gives a more pleasing and visually appealing effect as the page smoothly scrolls to the target element.

Here’s an example of how to use the scroll-behavior property in your CSS:

In the example above, we’re setting the scroll-behavior property for the html element to smooth. This will make all internal anchor links (e.g., <a href="#section">) scroll smoothly to their target elements within the same page when clicked. learn more about CSS.

Smooth Scrolling with JavaScript

To achieve smooth scrolling on your website, you can use the scroll-behavior property in CSS, as mentioned in the previous response. However, you can also implement smooth scrolling using JavaScript, which gives you more control and customization options. Here’s a step-by-step guide on how to do smooth scrolling using JavaScript:

1. HTML Structure:Start with your HTML structure. You should have anchor links that link to various sections of your webpage. For example:
   htmlCopy code

   <a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<!-- ... -->
<div id="section1">Content of Section 1</div>
<div id="section2">Content of Section 2</div>
<!-- ... -->

2. JavaScript: Next, you’ll use JavaScript to add the smooth scrolling behavior. You can add this script at the end of your HTML body or include it in an external JavaScript file.
   htmlCopy code

   <script>
document.addEventListener('DOMContentLoaded', function () {
const links = document.querySelectorAll('a[href^="#"]');
for (const link of links) {
link.addEventListener('click', smoothScroll);
}function smoothScroll(e) {
   e.preventDefault();
   const targetId = this.getAttribute(‘href’).substring(1);
   const targetElement = document.getElementById(targetId);
   const yOffset = targetElement.getBoundingClientRect().top + window.pageYOffset;
   window.scroll({
   top: yOffset,
   behavior: ‘smooth’
   });
   }
   });</script>


   This script does the following:

   • It selects all anchor links with href attributes starting with #.
   • It prevents the default link behavior (i.e., jumping to the target).
   • It calculates the target element’s position using getBoundingClientRect() and adds the current scroll position to it.
   • It uses window.scroll() with behavior: 'smooth' to smoothly scroll to the target.
3. Styling (Optional):You can add CSS styles to make your links and target sections visually appealing. For example, you can change the link colors, fonts, or add some margin to the target sections to ensure they aren’t obscured by the navigation bar.
4. Test and Adjust:Finally, test your website to ensure that smooth scrolling works as expected. You may need to adjust the script or styles based on your specific design and requirements.

Smooth Scroll with jQuery

To achieve smooth scrolling using jQuery, you can follow these steps:

1. Include jQuery: Make sure you include jQuery in your HTML document. You can either download it and host it locally or use a Content Delivery Network (CDN) to include it.
   htmlCopy code

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. HTML Structure: Create the HTML structure with anchor links and the sections you want to scroll to. For example:
   htmlCopy code

   <a href="#section1">Section 1</a>
<a href="#section2">Section 2</a><div id=“section1”>Content of Section 1</div>
   <div id=“section2”>Content of Section 2</div>
3. jQuery Smooth Scrolling: Use jQuery to implement smooth scrolling:
   htmlCopy code

   <script>
$(document).ready(function() {
// Select all anchor links with hash (#) in their href attribute
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
const target = $(this.hash);
$('html, body').animate(
{
scrollTop: target.offset().top
},
1000 // You can adjust the duration of the scroll animation here
);
});
});
</script>


   In the above script:

   • We wait for the document to be ready using $(document).ready() to ensure that the DOM elements are fully loaded.
   • We select all anchor links with href attributes containing #.
   • We prevent the default behavior of clicking on a link.
   • We find the target element to scroll to using $(this.hash).
   • We use animate() to smoothly scroll to the target element. You can adjust the duration (in milliseconds) to control the speed of the animation.
4. Styling (Optional): Add CSS styles to make your links and target sections visually appealing.
5. Testing and Adjustments: Test your website to ensure smooth scrolling works as expected, and make any necessary adjustments to the script or styles based on your specific design and requirements.