Reset scroll on route change

At a glanceCopy Anchor Link

• Who: Developers whose client-side navigation keeps the previous page's scroll position.
• What: Scrolls to the top (or to the #hash anchor) when the route key changes, leaving back/forward restoration to the browser.
• Use when: Once near the root of the app, fed the router pathname (usePathname() in Next.js).
• Avoid when: For in-page anchor links or scroll spies — the browser already handles those.
• See also: Render a route as a modal over the list

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 1.6.2 (via changesets).

ExampleCopy Anchor Link

"use client";
import { ScrollReset } from "@zedtech/zedkit-ui";
import { usePathname } from "next/navigation";
export function RouteScroll() {
  return <ScrollReset routeKey={usePathname()} />;
}

import { useScrollReset } from "@zedtech/zedkit-ui";
const getMain = useCallback(() => document.querySelector<HTMLElement>("main"), []);
useScrollReset(pathname, { target: getMain });

Wraps: (none)

AccessibilityCopy Anchor Link

Jumps instantly by default and always under prefers-reduced-motion: reduce; behavior="smooth" only applies when motion is allowed. Does not move focus. Back/forward (popstate) navigations are skipped so the browser restores the previous position.