prevent page scroll to top when router push
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
In the new app directory, is it possible to prevent the page from scrolling back to the top when using router.push() ?
The behavior ideally would be to when router.push() it will maintain its current position to avoid looking as if the page has reloaded.
The behavior ideally would be to when router.push() it will maintain its current position to avoid looking as if the page has reloaded.
2 Replies
Asiatic Lion
Hey @Transvaal lion, I've ran into a similar scenario. What I found in the docs is that you can include the
Unfortunately in my situation, that did nothing to prevent my scrollbar from resetting to the top (i.e., position: [0, 0]).
Link: https://nextjs.org/docs/app/api-reference/functions/use-router#disabling-scroll-restoration
{ scroll: false } option with router.push. That should prevent the page from scrolling to the top between backward/forward navigation, and instead, restore the scroll position the user navigated from. Unfortunately in my situation, that did nothing to prevent my scrollbar from resetting to the top (i.e., position: [0, 0]).
Link: https://nextjs.org/docs/app/api-reference/functions/use-router#disabling-scroll-restoration
Transvaal lionOP
Thanks for that. I'll try and see if that works.