How to Scroll to ID in JavaScript

To scroll to an element by ID, select it with document.getElementById() and call its scrollIntoView() method. For ordinary same-page navigation, an HTML anchor such as <a href="#details">Details</a> is often enough; JavaScript is useful when the target or action is chosen dynamically. The examples below show direct element scrolling, a custom document offset, and scrolling inside a container.

Use the element.scrollIntoView() Method to Scroll to ID in JavaScript

scrollIntoView() is the straightforward choice when you want the browser to bring a known element into view. It can align the element at the start, center, or end of the visible area, and can request smooth movement:

<a href="#details">Go to details</a>

<section id="details">
  <h2>Details</h2>
  <p>The browser navigates to this section.</p>
</section>

<button id="show-details" type="button">Show details smoothly</button>
<script>
  const details = document.getElementById("details");
  document.getElementById("show-details").addEventListener("click", () => {
    details.scrollIntoView({ behavior: "smooth", block: "start" });
  });
</script>

This is a browser-page illustration, not a runtime example. In an article with actual content, keep the target ID unique. Use the native anchor when a link should work as normal navigation; call scrollIntoView() when an event handler or other application logic should initiate the movement. The options object avoids the older boolean form and makes the intended alignment explicit. behavior can be "smooth" or "auto"; block and inline control alignment on the vertical and horizontal axes.

Use the window.scrollTo() Method With Manual View Calculation to Scroll to ID in JavaScript

Use window.scrollTo() when the target needs a custom position, such as space below a fixed header. getBoundingClientRect().top is measured from the top of the viewport, so add the current document scroll position to convert it to a document coordinate. Subtract the desired gap to place the target below the header:

function getScrollTopForTarget(targetTopInViewport, currentScrollY, headerGap) {
  return targetTopInViewport + currentScrollY - headerGap;
}

const targetTop = 420;
const currentScrollY = 300;
const headerGap = 64;
console.log(getScrollTopForTarget(targetTop, currentScrollY, headerGap));

This self-contained JavaScript calculation is unexecuted here. In browser code, pass the measured values to it and use the result as the top value in window.scrollTo({ top, behavior: "smooth" }):

<button id="jump" type="button">Open the section</button>
<div style="height: 900px"></div>
<section id="target"><h2>Target section</h2></section>
<script>
  document.getElementById("jump").addEventListener("click", () => {
    const target = document.getElementById("target");
    const headerGap = 64;
    const top = target.getBoundingClientRect().top + window.scrollY - headerGap;
    window.scrollTo({ top, behavior: "smooth" });
  });
</script>

The HTML is a browser-page illustration and is not presented as runtime evidence. Adjust headerGap to match the space the fixed header occupies. If no custom placement is needed, scrollIntoView() requires less coordinate handling.

Use the scrollTo() Method With scrollLeft and scrollTop to Scroll to ID in JavaScript

scrollLeft and scrollTop describe the current horizontal and vertical scroll positions of a scrollable element. They do not tell you where an arbitrary target ID sits in the document. To bring a target inside a nested scrolling panel into view, call scrollIntoView() on that target; to set the panel’s coordinates directly, call its scrollTo() method.

<div id="panel" style="height: 180px; overflow: auto">
  <div style="height: 400px">Scrollable panel content</div>
  <p id="panel-target">Target inside the panel</p>
</div>
<button id="panel-button" type="button">Scroll panel to target</button>
<script>
  const panel = document.getElementById("panel");
  const panelTarget = document.getElementById("panel-target");
  document.getElementById("panel-button").addEventListener("click", () => {
    panelTarget.scrollIntoView({ behavior: "smooth", block: "start" });
  });
</script>

This browser-page illustration is unexecuted. If you already know the container coordinates you want, panel.scrollTo({ left: 0, top: 200, behavior: "smooth" }) sets the panel position. Reading panel.scrollTop or panel.scrollLeft is useful for checking its current position, but those values are not target coordinates.

Conclusion

Use a native href="#id" link for ordinary same-page navigation. Use scrollIntoView() to bring a selected element into view, including a target inside a scrollable container. Use window.scrollTo() with a calculated coordinate when the document target needs a custom offset, for example to clear a fixed header. scrollLeft and scrollTop track a scrollable element’s position; they do not locate an ID.