How to Add Smooth Scrolling to Web Pages with Anchor Links

In this detailed guide, we’ll explore how to add smooth scrolling to web pages when users click on anchor links. Anchor links in HTML are typically denoted with a hash sign (#) and are used for navigating to different sections within the same page. Our focus will be on enhancing the user experience by implementing smooth scrolling instead of the abrupt jumps that are the default behavior in most browsers.

Writing Anchor Links

First, let’s begin by writing the basic HTML structure. Within the body tags, we’ll create a list (ul) with list items (li). Each item will contain an anchor tag (a), with the href attribute starting with a hash sign followed by an identifier. This identifier will correspond to the section of the page we want to navigate to.

Creating Sections

Next, we’ll create sections on the page that our anchor links will target. Each section will be marked with a h2 tag, given a unique id that matches the identifiers in our anchor links. For example, if we have a link with href="#section1", there should be a corresponding <h2 id="section1">.

Implementing Smooth Scrolling

Initially, clicking on these links will cause the browser to jump directly to the corresponding section. However, our goal is to make this transition smooth.

One way to achieve smooth scrolling is by using CSS. In browsers like Chrome and Firefox, we can add a scroll-behavior property to the html or body tag and set it to smooth. This is a simple and effective method but may not work consistently across all browsers.

html {
  scroll-behavior: smooth;
}

For broader compatibility, we can use JavaScript or jQuery. By writing a small script, we can intercept the click event on our anchor links and animate the scroll to the target section smoothly. This method provides more control and consistency across different browsers.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").on('click', function(event) {

    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        window.location.hash = hash;
      });
    }
  });
});
</script>

Enhancing User Experience

Adding “Move Up” Links

To further enhance navigation, we can add “Move Up” links under each section, allowing users to easily navigate back to the top of the page. This link would target an element (like a header) placed at the top of the page.

Application in Single Page Designs

This smooth scrolling feature is particularly useful in single-page website designs, where different sections of the page are linked to the navigation menu. It provides a seamless and elegant transition between sections, improving the overall user experience.

Conclusion

Implementing smooth scrolling with anchor links is a straightforward process that significantly enhances the usability and aesthetic appeal of a website. Whether through CSS or JavaScript, this feature is adaptable to various web designs and is particularly beneficial in single-page layouts.