How to Trigger Smooth Scrolling in JavaScript

This article provides an overview of smooth scrolling in web development and demonstrates how to implement it programmatically using modern JavaScript scroll APIs. You will learn the difference between instant and smooth scrolling, explore native JavaScript methods such as window.scrollTo(), window.scrollBy(), and Element.scrollIntoView(), and see practical code examples to enhance user navigation on your website.

What is Smooth Scrolling?

Smooth scrolling is a visual design pattern where the browser animates the transition between the current viewport position and a target position on the webpage, rather than instantly jumping to the new coordinates. This animated motion helps users maintain visual context, making page navigation feel more fluid and intuitive, especially on long single-page layouts or during anchor-link transitions.

Triggering Smooth Scrolling with JavaScript

Modern browsers provide native APIs that accept options objects containing the behavior: 'smooth' property. This eliminates the need for external libraries or manual requestAnimationFrame loops.

1. Using window.scrollTo() and window.scrollBy()

The window.scrollTo() method scrolls the window to a specific set of absolute coordinates, while window.scrollBy() scrolls the document by a relative amount from the current position.

Example using window.scrollTo():

// Scroll to the absolute position (top: 1000px) smoothly
window.scrollTo({
  top: 1000,
  left: 0,
  behavior: 'smooth'
});

Example using window.scrollBy():

// Scroll down by 500px relative to the current position
window.scrollBy({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

2. Using Element.scrollIntoView()

The scrollIntoView() method scrolls the element’s ancestor containers so that the target element becomes visible in the viewport. It is the most effective method for navigating to specific DOM elements like sections or headers.

Example using Element.scrollIntoView():

const targetElement = document.getElementById('target-section');

targetElement.scrollIntoView({
  behavior: 'smooth',
  block: 'start',      // Vertical alignment: 'start', 'center', 'end', or 'nearest'
  inline: 'nearest'    // Horizontal alignment: 'start', 'center', 'end', or 'nearest'
});

3. Scrolling Specific Scrollable Containers

The same options-based syntax can be applied to individual scrollable elements (such as div containers with overflow: scroll or overflow: auto) using Element.scrollTo() or Element.scrollBy().

Example on a scrollable container:

const container = document.querySelector('.scrollable-container');

container.scrollTo({
  top: 300,
  behavior: 'smooth'
});

Accessibility Considerations

When implementing smooth scrolling programmatically, consider users who have motion sensitivities. You can respect user preferences by checking the prefers-reduced-motion media query before enabling smooth scrolling:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

window.scrollTo({
  top: 1000,
  behavior: prefersReducedMotion ? 'auto' : 'smooth'
});