Scroll Restoration
Unanswered
Balinese posted this in #help-forum
BalineseOP
Hey everyone,
I have a question about routing behavior in Next.js.
I have a route structure where /planning displays a long, scrollable list of items. There's also a dynamic [id] route, so when a user visits /planning/id, they can change or add data. This triggers a revalidation of either the path or tag.
Afterward, when the user navigates back to /planning either using the browser's back button or via a <Link /> component, the scroll position resets to the top of the page.
Is this expected behavior (that scroll position is NOT restored)? Interestingly, if the user doesn't trigger any revalidation, the scroll position is correctly restored.
Any insights would be appreciated!
I have a question about routing behavior in Next.js.
I have a route structure where /planning displays a long, scrollable list of items. There's also a dynamic [id] route, so when a user visits /planning/id, they can change or add data. This triggers a revalidation of either the path or tag.
Afterward, when the user navigates back to /planning either using the browser's back button or via a <Link /> component, the scroll position resets to the top of the page.
Is this expected behavior (that scroll position is NOT restored)? Interestingly, if the user doesn't trigger any revalidation, the scroll position is correctly restored.
Any insights would be appreciated!
7 Replies
@Balinese Hey everyone,
I have a question about routing behavior in Next.js.
I have a route structure where /planning displays a long, scrollable list of items. There's also a dynamic [id] route, so when a user visits /planning/id, they can change or add data. This triggers a revalidation of either the path or tag.
Afterward, when the user navigates back to /planning either using the browser's back button or via a <Link /> component, the scroll position resets to the top of the page.
Is this expected behavior (that scroll position is NOT restored)? Interestingly, if the user doesn't trigger any revalidation, the scroll position is correctly restored.
Any insights would be appreciated!
Hey, for the Link component u can set scroll attribute to false like this
<Link href="/planning" scroll={false}>
Planning
</Link>also documented here https://nextjs.org/docs/app/api-reference/components/link#scroll
BalineseOP
even with this attrubite, it reset the scroll position after a revalidation
mind sharing me your codebase?
ill try to reproduce it
American Crocodile
The issue seems to be the scroll position gets reset before the previous page gets revalidated so when the page finally does revalidate and navigate, the scroll position will only be as high as the height of the previous page. I have created a small example in codesandbox, you should however open it in a new window because the scroll restoration doesn't work at all in the small window... https://codesandbox.io/p/devbox/revalidate-scroll-restoration-n9ry7r