How to Scroll in JavaScript

Use JavaScript scrolling when the page should move to a section, return to the top, focus a newly opened area, or react to navigation clicks. The cleanest default is scrollIntoView() for element-based scrolling.

What you’ll build or solve

You’ll learn how to scroll in JavaScript using scrollIntoView() and window scroll methods. You’ll also know how to create smooth scrolling behavior.

When this approach works best

This approach is the right choice when navigation or UI state should move the user to a different visible position.

Common real-world scenarios include:

• Jump to section links
• Back-to-top buttons
• Error field focus
• Chat autoscroll
• Newly loaded content

This is a bad idea when normal anchor links already solve the navigation cleanly.

Prerequisites

You only need:

• A basic HTML page with enough scrollable content
• A JavaScript file or <script> tag
• Basic DOM selection knowledge

Step-by-step instructions

Step 1: Scroll to an element or page position

Use scrollIntoView() for the cleanest section scrolling.

const pricing = document.querySelector("#pricing");

pricing.scrollIntoView({
  behavior: "smooth"
});

This scrolls the page until the element becomes visible.

For page-level scrolling, use window.scrollTo().

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

This works perfectly for back-to-top buttons.

What to look for:

• scrollIntoView() targets specific elements
• scrollTo() targets page coordinates
• behavior: "smooth" improves UX
• Great for navigation and validation flows
• Prefer normal anchors when possible

Examples you can copy

Back to top

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

Scroll to contact form

document.querySelector("#contact").scrollIntoView({
  behavior: "smooth"
});

Chat autoscroll

chatEnd.scrollIntoView();

Common mistakes and how to fix them

Mistake 1: Scrolling before the element exists

What the reader might do:

document.querySelector("#faq").scrollIntoView();

Why it breaks: the selector may return null.

Corrected approach:

Ensure the element exists first.

Mistake 2: Using coordinates for dynamic sections

What the reader might do:

window.scrollTo({ top: 1200 });

Why it breaks: layout changes can make the position wrong.

Corrected approach:

Use scrollIntoView() for section targets.

Mistake 3: Overriding native anchor behavior unnecessarily

What the reader might do:

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

Why it breaks: a simple anchor link may already do the job.

Corrected approach:

Use normal <a href="#section"> when no extra logic is needed.

Troubleshooting

If nothing scrolls, confirm the selector returns an element.

If the position is wrong, switch from fixed coordinates to scrollIntoView().

If the motion feels abrupt, add behavior: "smooth".

If anchor links already work, keep the HTML solution.

Quick recap

• Use scrollIntoView() for sections
• Use scrollTo() for page positions
• Add smooth scrolling for better UX
• Prefer element-based scrolling over hardcoded coordinates
• Use anchors when logic is unnecessary