How to Create a Smooth Animated Scroll with JavaScript

A third-party library used to be required to accomplish simple effects like a smooth scroll in JavaScript. Those days are history now that vanilla JavaScript supports this feature across almost all modern browsers with the built-in window.scrollTo() method.

Why Choose Smooth Scrolling?

Put yourself in the user's position. You click on a web page element, only to find that the screen has suddenly changed and you don't know what happened or where you are. This abrupt change can be confusing to many users.

Enter smooth scrolling, which JavaScript provides seamlessly. Think of it as a guide. The animation guides you to the desired spot after clicking on a web page element. So now you know where you are and how you arrived there. Overall, it provides a more pleasant and user-friendly experience.

While smooth animated scrolling is a great feature to have, it can also be easily abused. Make sure that you're not putting auto-scroll features all over your site where your users wouldn't expect to have it. Clicking a menu option or button to take a user to a different part of the current page is ideal, but setting auto-scrolls throughout the site to lure them to other places they wouldn't expect is not.

How to Animate Scrolling with JavaScript

You're probably already familiar with creating a scroll that automatically jumps to a specific location within a webpage:

window.scrollTo(0, 1000);

The above snippet jumps the user down 1,000 pixels vertically from the top of the web page, just without the animation.

Vanilla JavaScript can scroll using a smooth animation with the following syntax:

window.scroll({
top: 1000,
behavior: "smooth"
});

The second snippet provides the same result as the first, except this time it animates down 1,000 pixels vertically from the top of the web page.

Incremental Scroll

There may be times where you don't want to scroll to a specific Y position on a web page, but you want to scroll up or down an exact pixel amount.

This is known as incremental scrolling, which you can accomplish this with JavaScript's window.scrollBy() method:

window.scrollBy({
top: -100,
behavior: "smooth"
});

Scroll to the Top of the Page

You can scroll to the top of the page by setting the "top" attribute to 0, the first Y position in an HTML page:

window.scrollTo({
top: 0,
behavior: "smooth"
});

Scroll to the Bottom of the Page

Similarly, you can scroll to the bottom of the page by retrieving the window's inner height:

window.scrollTo({
top: window.innerHeight,
behavior: "smooth"
});

Scroll to a DOM Element

This option creates an automatic smooth animated scroll to an element within the DOM:

document
.getElementById("orangeable")
.scrollIntoView({behavior: "smooth"});

This piece of code looks for the DOM element with ID orangeable, then scrolls to the top portion of that element until it's in view.

Scrolling Behaviors

There are only two available behavior methods for smooth scrolling in JavaScript:

  • smooth: The scrolling animates smoothly.
  • auto: The scrolling happens in a single jump.

If you want to jump scroll, you can save yourself the extra code and use the window.scrollTo() method with X and Y values that we discussed earlier.

Browser Support

Smooth scrolling is available in most modern browsers. Unfortunately for Apple users, Safari does not support his feature yet, however, there is a polyfill option available that will fill the gap and provide the functionality you're looking for.

Conclusion

Give smooth scrolling a shot in your next project! It's great fun to work with, extremely easy to implement, and provides a better overall experience for your users.

Created: April 20, 2021

Comments

There are no comments yet. Start the conversation!

Leave a Comment

  Wrap code in a <code> and </code> block.
Subscribe to the newsletter to receive updates on new articles!
Remember my info