Scroll to top issue
Unanswered
Spotted Rail posted this in #help-forum
Spotted RailOP
Does anyone face this issue? In next 13 and above
https://github.com/vercel/next.js/issues/45187
https://github.com/vercel/next.js/issues/45187
4 Replies
Spotted RailOP
I would like to know the best workaround in case if it's still unsolved
@Spotted Rail Does anyone face this issue? In next 13 and above
https://github.com/vercel/next.js/issues/45187
i myself don't face this bug
but there are several reports of it yes. to workaround it try this
or the various
but there are several reports of it yes. to workaround it try this// Instead of
<Link href="...">Hello</Link>
// do
<Link
href="..."
onClick={() => {
window.scroll(0, 0);
}}
>
Hello
</Link>or the various
window.scroll workarounds suggested in that issueSpotted RailOP
I see... I don't understand how/why adding an icon library can cause the scroll issue
Havana
It's not linked to the icon library, that may be causing it for some people but it's not for all. There's a minimal repro on the issue that doesn't have any deps and demonstrates the bug.
For both methods,
router.push (https://nextjs.org/docs/app/api-reference/functions/use-router#disabling-scroll-restoration)
Link scroll property (https://nextjs.org/docs/pages/api-reference/components/link#disable-scrolling-to-the-top-of-the-page)
The implication is that the default behaviour without any user interaction sets scrolling to top on a new route and passing
I've implemented a layout level scrollToTop bound to a useEffect linked to the usePathname hook but even that doesn't seem to cover all of the time.
I've had to forcibly put a scroll to top on the individual pages where I want to guarantee users are going to be scrolled to the top on each visit.
For both methods,
router.push (https://nextjs.org/docs/app/api-reference/functions/use-router#disabling-scroll-restoration)
Link scroll property (https://nextjs.org/docs/pages/api-reference/components/link#disable-scrolling-to-the-top-of-the-page)
The implication is that the default behaviour without any user interaction sets scrolling to top on a new route and passing
scroll: false will prevent that behaviour i.e. maintaining the current scroll position on the next page. However the definition of a new route is crucial here. The behaviour I'm experiencing is scroll behaviour correctly going to top on a page never visited but when jumping between pages repeatedly that I've already visited, the previous scroll position is retained.I've implemented a layout level scrollToTop bound to a useEffect linked to the usePathname hook but even that doesn't seem to cover all of the time.
I've had to forcibly put a scroll to top on the individual pages where I want to guarantee users are going to be scrolled to the top on each visit.