Reset Scroll on Route Change

useRouteScrollReset records unmodified same-origin anchor clicks to a different pathname with no hash, then scrolls to the top when that destination becomes active. It deliberately leaves hash scrolling and browser Back/Forward to the browser or router.

React Router

Mount this component inside your router:

import { useLocation } from 'react-router'
import { useRouteScrollReset } from '@n3wth/ui/site'

export function RouteScrollReset() {
  const { pathname } = useLocation()
  useRouteScrollReset(pathname)
  return null
}

Avoid mounting competing scroll-reset implementations. If the router or another hook already resets scroll on navigation, remove one before adding the other.

Reading Outline

Render a scroll-spy outline for long-form pages.

Layouts

Compose page frames with SiteContainer and PageHeader.

Last modified on September 20, 2026

Get Started

Theming

Components

Recipes

Reference

Reset Scroll on Route Change

React Router

Reading Outline

Layouts

​React Router

​Related

Reading Outline

Layouts

React Router

Related