Files
Arkie-Library-Frontend/src/components/ScrollToTop.tsx
TerryM 41299b5b65 feat(deeplink): jump from banner/rank list to the exact post in All Materials
- FigmaBanner: route same-app linkUrl through SPA navigation so the stream's
  scroll-to-post runs without a full reload; defer pointer capture until a real
  drag starts, fixing plain clicks being swallowed by setPointerCapture
- PopularRankList: rank rows navigate straight to /browse?sort=popular&post=<id>
- MessageStream: ?post= deep links jump directly to the target instead of
  resetting to the top and animating through the stream
- ScrollToTop: skip the top-reset for ?post= navigations so the target page
  handles its own alignment

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-05-30 17:54:16 +08:00

23 lines
827 B
TypeScript

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
/**
* Resets the window to the top on every route change. React Router does not
* restore scroll on client navigation, so without this a short new page would
* clamp to wherever the previous (taller) page was scrolled — e.g. landing at
* the bottom of a category page after clicking a card far down the home grid.
*
* Skips navigations that carry a hash (`#post-<id>`, `#categories`, …) or a
* `?post=<id>` deep link so the target page can handle its own alignment.
*/
export function ScrollToTop() {
const { pathname, search, hash } = useLocation();
useEffect(() => {
if (hash || new URLSearchParams(search).has("post")) return;
window.scrollTo({ top: 0, left: 0 });
}, [pathname, search, hash]);
return null;
}