Creating Accessible Smooth Scroll to Page Anchors Using JavaScript: Enhancing User Experience

When browsing through a lengthy web page, it can be frustrating to encounter abrupt jumps when clicking on anchor links. Luckily, there’s a solution: smooth scroll. Smooth scroll provides a smoother and more enjoyable scrolling experience for users, making navigation within long-scrolling websites a breeze.

In this article, we’ll explore the importance of smooth scrolling in improving user experience on websites with extended content. We’ll dive into the basics of implementing smooth scroll functionality using JavaScript, allowing you to create seamless transitions between different sections of your web pages.

Whether you’re designing a single-page website, a landing page, or incorporating anchor links in your content, learning about and applying smooth scroll techniques will add a professional touch and enhance the usability of your website. Get ready to discover the power of smooth scrolling and captivate your visitors with effortless navigation.

How To Implement Smooth Scroll Using JavaScript

To implement smooth scrolling to page anchors using JavaScript, you can follow these steps:

Add an id attribute to the HTML element you want to scroll to. For example, <h2 id="section1">Section 1</h2>.

Create a JavaScript function that handles the smooth scroll behavior. Here’s an example:

function smoothScroll(target) {
  const element = document.getElementById(target);
  if (element) {
    window.scrollTo({
      top: element.offsetTop,
      behavior: 'smooth'
    });
  }
}

Attach click event listeners to the anchor elements that trigger the smooth scroll. Add the smoothScroll function to the click event listener. For example:

document.addEventListener('DOMContentLoaded', function() {
  const anchors = document.querySelectorAll('a[href^="#"]');
  anchors.forEach(function(anchor) {
    anchor.addEventListener('click', function(event) {
      event.preventDefault();
      const target = anchor.getAttribute('href').substring(1);
      smoothScroll(target);
    });
  });
});

In your HTML, use anchor tags (<a>) with href attributes set to the corresponding id of the element you want to scroll to. For example:

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

By implementing the above code, when a user clicks on an anchor link, the page will smoothly scroll to the specified section with the corresponding id.

Full Code Example

See the Pen Untitled by amrelarabi (@amrelarabi) on CodePen.

Accessibility Improvements

One major accessibility issue in the provided code is that, after clicking on another section link, the focus remains on the same link instead of moving to the first focusable element within the newly scrolled-to section.

See the Pen Smooth Scroll Accessible Version by amrelarabi (@amrelarabi) on CodePen.

To better understand this behavior, let’s go through the process step by step. When you navigate through the navigation items using the Tab key and then press Enter to scroll to a specific item, the focus state will transition from the navigation to the scrolled section. As a result, when you continue to navigate by pressing Tab, you will notice that the focus moves to the next scrollable item, which in this case is the “Back to Top” button.