# HP5007: Scroll position was reset during hydration

> HP5007 (scroll-reset) means the page scrolled on its own while it hydrated, so a user who had already scrolled lost their place. Why and how to fix it.

Source: https://hydration.jscrate.dev/docs/issues/hp5007
Last updated: 2026-09-18

HP5007 (`scroll-reset`) means the page scrolled on its own while it hydrated.
A user who had already scrolled down to read lost their place. It usually comes
from code that scrolls or moves focus when the page loads. Do not change the
scroll position during hydration; let the browser restore it.

| | |
| --- | --- |
| Code | `HP5007` |
| Name | `scroll-reset` |
| Default severity | Warning |
| Group | Interaction during hydration |
| What it means | The page scrolled on its own while it hydrated, so the user lost their place. |

## What the HP5007 scroll reset finding means

The finding comes from the [interaction checks](https://hydration.jscrate.dev/docs/interactions)
(`checks.interactions: true` or `--interactions`). With the page's scripts
held back, hydration-proof scrolls down, lets the page hydrate and compares the
scroll position. A change of more than 50 pixels is reported:

```text
The page was scrolled to 1200px before hydration and ended at 0px.
```

Pages without scrollable content are skipped. It is a warning.

## Likely causes

- `window.scrollTo(0, 0)` in an effect that runs on mount, often meant to
  reset the scroll on route changes.
- `focus()` on load, which scrolls the focused element into view.
- A hydration mismatch that replaces a large part of the page, so the content
  under the reader changes height.

## How to fix it

Do not change the scroll position during hydration (`scrollTo` in effects,
`focus()` on load); let the browser restore it.

```tsx title="components/search-field.tsx"
"use client";

import { useEffect, useRef } from "react";

export function SearchField() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // Before: inputRef.current?.focus() scrolled the page to the field
    inputRef.current?.focus({ preventScroll: true });
  }, []);

  return <input ref={inputRef} type="search" name="q" />;
}
```

Leave scrolling on navigation to the framework's router: it restores the
position on back and forward and scrolls to the top on new pages, without
running on the first load.

## When it is intentional

A page that jumps to a section on purpose can be ignored with an
`ignore.issues` rule for `code: "HP5007"` and its `route`; see
[ignoring findings](https://hydration.jscrate.dev/docs/ignoring).

## Related

- [HP5003: focus was lost during hydration](https://hydration.jscrate.dev/docs/issues/hp5003)
- [HP5002: user input was reset during hydration](https://hydration.jscrate.dev/docs/issues/hp5002)
- [Interaction checks](https://hydration.jscrate.dev/docs/interactions)
- [HP1011: React discarded the whole server-rendered page](https://hydration.jscrate.dev/docs/issues/hp1011)