How to Smoothly Scroll to an Element on the Page using JavaScript

JavaScript gives developers a large amount of control over the user experience of users.

One of the most useful things you can do is smoothly scroll to another element on the page.

For example, this can be used to scroll to a form element that needs filling or to a section of a page that has more information.

In this post, we will look at how to smoothly scroll to an element on the page.

How to smoothly scroll to an element

Let's start with our HTML:

HTML
<main>
    <button class="button">Click here to smoothly scroll</button>
    <div class="content">
        <p>This is sample content</p>
    </div>
</main>

We have a button that will be used to scroll to the content div once clicked.

Now, let's add some CSS:

CSS
html {
    scroll-behavior: smooth;
}

The magic here is the scroll-behavior property. This property allows us to set the scroll behavior of the page, and we are setting it to smooth.

Now all we need is some JavaScript to scroll to the element when the button is clicked:

JAVASCRIPT
const button = document.querySelector(".button");
const content = document.querySelector(".content");

button.addEventListener("click", () => {
    content.scrollIntoView();
});

Now, assuming your content is tall-enough, you should be able to see the content div smoothly scroll into view when you click the button.

Conclusion

In this post, we learned how to easily smoothly scroll to an element on the page.

Simply override the scroll behavior of the page and then scroll to the element you want to scroll to.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share