How to Implement Smooth Scrolling for Anchor Text with JavaScript and HTML

Smooth scrolling is a technique that enhances the user experience on a webpage by allowing the view to glide smoothly to the corresponding section when a link is clicked. This is not only aesthetically pleasing but also facilitates navigation on sites with extensive content. In this article, you will learn how to implement smooth scrolling for anchor text using JavaScript and HTML.

What is Smooth Scrolling?

Smooth scrolling is a phenomenon that allows the content on a page to move more gradually. Instead of jumping abruptly to the desired section, the browser will scroll the view of the page smoothly. This improves readability and the overall user experience, especially on mobile devices.

Basic HTML Structure

Before implementing smooth scrolling, it is essential to have an appropriate HTML structure with anchor links. Here’s a simple example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Scroll</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </nav>

    <div id="section1" class="section">Content of Section 1</div>
    <div id="section2" class="section">Content of Section 2</div>
    <div id="section3" class="section">Content of Section 3</div>

    <script src="script.js"></script>
</body>
</html>

Explanation of the HTML Code

Anchor Links: The links contained in the <nav> tag point to different content sections using href="#sectionX".
Sections: Each section is marked with an id that matches the anchor links so that the browser knows where to go.

CSS Style for the Sections

We will use CSS to define the basic style of our sections and make the content visible. Here’s an example of a CSS file:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

nav {
    position: fixed;
    top: 0;
    background-color: #333;
    width: 100%;
    color: white;
    padding: 10px 0;
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
}

.section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
}

#section1 {
    background-color: #f1c40f;
}

#section2 {
    background-color: #e67e22;
}

#section3 {
    background-color: #e74c3c;
}

Explanation of the CSS Code

Navigation Design: The <nav> element is fixed at the top, allowing the links to remain accessible while the user scrolls through the content.
Section Style: Each section occupies the full height of the window, helping to center the content.

JavaScript Implementation for Smooth Scrolling

Now that we have a HTML structure and CSS styles, the next step is to implement the JavaScript code that will enable the smooth scrolling behavior.

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();

        const targetElement = document.querySelector(this.getAttribute('href'));

        targetElement.scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Explanation of the JavaScript Code

Link Selection: The code selects all links that point to a section id.
Click Event: When clicking on a link, the default behavior that would cause an immediate jump is prevented.
Smooth Scrolling: The scrollIntoView function is used, specifying the option behavior: 'smooth' to enable smooth scrolling.

Conclusion

Implementing smooth scrolling for anchor text on your website using HTML and JavaScript is a simple process that can significantly enhance user experience. The combination of CSS, HTML, and JavaScript allows for a smoother and more aesthetically pleasing navigation. Whether you have a blog, a landing page, or a portfolio, smooth scrolling can make your site more attractive.

I hope this article has been useful, and that you can easily implement smooth scrolling in your project. Feel free to experiment with different styles and functionalities to further improve user experience!