I'm currently working on a next.js app and I'm trying to implement a "back to start" link with specific behavior:
- The user starts on the main page and scrolls down.
- When navigating to a subpage, they should find the "back to start" link.
- If the user clicks on "back to start", they should be redirected to the main page with the scroll position intact from when they left.
However, if the user enters the subpage directly via URL, the "back to start" button should simply take them to the main page at the top.
I've created a codesandbox example for reference.
Here's what I've attempted so far:
- Using the next.js
<Link>component. However, this redirects to the main page scrolled to the top. - Trying the
scroll={false}property for the next.js<Link>. This maintains the current scroll position but doesn't restore the original position. - Utilizing next.js
router.back(). This works in preserving the scroll position when returning to the main page, but not if the user accesses the subpage directly via URL.
Do you have any suggestions or perhaps a combination of these strategies to achieve the desired functionality?