How to Create Smooth Scrolling When Clicking an Anchor Link in JavaScript

As a web developer, you know how important it is to provide a smooth and seamless user experience for your website visitors.

One key aspect of this experience is the way in which users navigate through your pages.

While traditional scrolling methods may work well, you can enhance this experience by creating a smooth scrolling effect when clicking on anchor links.

Anchor links, also known as jump links, are links that take users to a specific section on a web page, rather than simply moving them to the top or bottom of the page.

With the right code, you can create a smooth scrolling effect that makes this process even more seamless and enjoyable for your users.

In this tutorial, we’ll discuss how to create a smooth scrolling effect when clicking on anchor links using JavaScript.

We’ll cover the basics of how anchor links work, as well as provide step-by-step instructions and code examples to help you implement this feature on your website.

What are Anchor Links?

Anchor links are links that take users to a specific section of a page, rather than simply moving them to the top or bottom of the page.

These links are typically created using HTML and are assigned a unique ID that corresponds to the section on the page that the link should take the user to.

For example, consider the following HTML code for a web page with two sections:

<body>
  <h1 id="section1">Section 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel urna ut velit rutrum bibendum. Maecenas condimentum magna at metus congue facilisis. Aliquam non nunc nunc. </p>
  <h1 id="section2">Section 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel urna ut velit rutrum bibendum. Maecenas condimentum magna at metus congue facilisis. Aliquam non nunc nunc. </p>
</body>

You can create an anchor link that takes the user to the first section of the page by adding the following code:

<a href="#section1">Go to Section 1</a>

When a user clicks on this link, they will be taken directly to the first section of the page, rather than simply moving to the top or bottom of the page.

Creating a Smooth Scrolling Effect with JavaScript

To create a smooth scrolling effect when clicking on anchor links, you’ll need to add some JavaScript to your website.

This code will listen for clicks on anchor links and smoothly scroll the user to the corresponding section on the page.

Here’s the code you’ll need to add to your website:

// Select all anchor links on the page
var links = document.querySelectorAll('a[href^="#"]');

// Loop through each link
for (var i = 0; i < links.length; i++) {
  // Add a click event listener to each link
  links[i].addEventListener('click', function(event) {
    // Prevent the default behavior of the link
    event.preventDefault();
    
    // Get the target section ID
    var targetId

// Find the target section
var targetSection = document.querySelector(targetId);

// Calculate the distance from the top of the page to the target section
var targetPosition = targetSection.offsetTop;

// Scroll to the target section over a period of 1000 milliseconds (1 second)
window.scroll({
  top: targetPosition,
  behavior: 'smooth'
});

This code starts by selecting all anchor links on the page using the querySelectorAll method.

It then loops through each link and adds a click event listener to each one.

When a user clicks on a link, the code prevents the default behavior of the link (which is to move to the top or bottom of the page), finds the target section on the page using its unique ID, calculates the distance from the top of the page to the target section, and finally scrolls to the target section over a period of 1000 milliseconds (1 second).

To implement this code on your website, simply copy and paste it into your JavaScript file and make sure it is loaded on all pages that contain anchor links.