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
}

Caution

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

Related

Reading OutlineRender a scroll-spy outline for long-form pages.

LayoutsCompose page frames with SiteContainer and PageHeader.