React ScrollIntoView and UseRef: Scroll to Any Element

React scrollIntoView + useRef: Scroll to Any Element

The React Systems Newsletter

SubscribeSign in

React scrollIntoView + useRef: Scroll to Any Element A practical guide to scrolling, refs, fixed headers, newly rendered elements, and the cases where native browser behavior stops being enough.

The React Systems Newsletter Aug 20, 2026

A long form is one of the easiest places to notice bad scrolling behavior. The user clicks Submit. Validation fails somewhere much farther down the page. React renders the error correctly, but the user cannot see it. From their point of view, nothing happened. Thanks for reading! Subscribe for free to receive new posts and support my work.

The fix can be only a few lines: import { useRef } from "react";

export default function Article() { const detailsRef = useRef(null);

function goToDetails() { detailsRef.current?.scrollIntoView({ behavior: "smooth", block: "start", });

return ( <>

Go to details

Details This is the section we wanted to reach.

); }For basic navigation, this is usually all you need. useRef gives you access to the DOM element. scrollIntoView() asks the browser to bring that element into view. The optional chaining is there because detailsRef.current is still null before React mounts the section. There is no library involved, no manual coordinate calculation, and no extra state. The interesting part begins when the page gets more complicated. The options you actually need

The native scrollIntoView() API has a few useful options, but you do not need to memorize all of them before using it. For most React components, these three patterns cover nearly everything. Scroll the element to the top: element.scrollIntoView();Move it smoothly toward the center: element.scrollIntoView({ behavior: "smooth", block: "center", });Move only when necessary: element.scrollIntoView({ block: "nearest", });The last one is especially useful. Imagine a command menu with twenty results. The user moves through them with the keyboard. If every Arrow Down press centers the active item, the list keeps jumping around even when the next item is already visible. block: "nearest" behaves differently. The browser moves only enough to reveal the target. If the item is already visible, it may not scroll at all. That small difference makes keyboard-controlled lists feel much calmer. There is also an older boolean version: element.scrollIntoView(true); element.scrollIntoView(false);It still works, but I would avoid it in new code. The object form makes the intention much easier to understand later. element.scrollIntoView({ block: "end", });One more thing catches people by surprise. scrollIntoView() is not limited to window. If the target sits inside a scrollable sidebar or panel, the browser can scroll that container too. In nested layouts, more than one scrollable ancestor may move so the element becomes visible. Most of the time, this saves you from writing extra code. Fixed headers should be handled in CSS

A sticky navigation bar creates one of the most common scrolling bugs. The element reaches the top of the page exactly as requested, then the header covers it. The first solution people often write looks like this: const HEADER_HEIGHT = 72;

const top = element.getBoundingClientRect().top + window.scrollY - HEADER_HEIGHT;

window.scrollTo({ top, behavior: "smooth", });It works until the header changes. Then mobile uses another height. A promo banner appears above it. Someone changes the spacing. The target moves into a nested scrollable container and the calculation no longer describes the real layout. Now the scrolling code owns a magic number that belongs to the CSS. There is already a property for this: .article-section { scroll-margin-top: 5rem; }If the header height is stored in a variable, even better: :root { --header-height: 5rem;

.article-section { scroll-margin-top: var(--header-height); }Your JavaScript can stay simple: sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start", });scroll-margin-top does not move the element in the normal layout. It only changes how much space the browser leaves when positioning that element during scrolling. For a fixed or sticky header, this should be the first solution you try. Scrolling to something React just created

This is where many otherwise correct examples break. Suppose you add a new row and want to scroll to it immediately: function addRow() { setRows((current) => [...current, createRow()]);

lastRowRef.current?.scrollIntoView({ behavior: "smooth", }); }The code looks reasonable, but the new row may not exist yet. Calling setRows() schedules an update. React still has to render the new list and commit the result to the DOM. The next line runs before that process is guaranteed to be finished. At that moment, lastRowRef.current can still point to the previous row. Scroll after React commits the update

An effect is the simplest solution when scrolling should happen because state...

React ScrollIntoView and UseRef: Scroll to Any Element

Related Articles

Incident with Github.com

(no title)

Scientists reverse brain aging, with a nasal spray

NHS apologises and admits Palantir have access to identifiable patient data

Cursor Origin