have been working on remix on a personal website and created a navbar with links to different routes. Lets say I'm in my homepage(I have scrolled till the footer) and I have clicked on a link for another route /products. This will redirect me to the /products page but the scroll will still be there in the footer, But i want the viewport/scroll focus on top when the route changes
<body> <Nav /> <Outlet /> <ScrollRestoration /> <Scripts /> <LiveReload /> <Footer /> </body>
I have tried removing the <ScrollRestoration /> component to see the browsers default behaviour but it is still not working. How to fix this ?
#Do not restore scroll position using <Link /> Navigation
severe geyser
severe geyser
Do not restore scroll position using <Link /> Navigation
limber hedge
You can do useEffect(() => window.scrollTo(0, 0), [location.pathname]);