Update URL hash without scrolling to the element?
Is there a way to change the url hash whenever the user clicks on an element without causing a page scroll? I only want the page to scroll when the user navigates to the url with hash for the first time or reloads the page.
5 Replies
like-gold•13mo ago
In the ScrollRestorationn component has a property named "getKey" that lets you control how the auto scroll is done.
Also, on the Link and navigate calls you have a property called resetScroll which you can set to false.
So it's a matter of if you want it to affect all routes or just for certain navigations
useful-bronzeOP•13mo ago
I tried setting
resetScroll to false, but it still scrolls the page whenever a link is clicked. Not sure if I'm doing something wrong or the prop is not working as expected.
Here's an example: https://stackblitz.com/edit/tanstack-router-co7gpv?file=src%2Froutes%2Findex.lazy.tsx
Also, with lazy route files, opening a link with a hash doesn't scroll the page - but that's already reported on https://github.com/TanStack/router/issues/2014Ivo Silva
StackBlitz
Router Basic File Based Example (forked) - StackBlitz
Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz
GitHub
Hashed link not scrolling with lazy file routes · Issue #2014 · Tan...
Describe the bug Urls with hashes not scrolling to correct section when using lazy file routes. This occurs any time the page is fully rerendered (e.g. on reload and when accessing a link with a ha...
ambitious-aqua•12mo ago
What is the status of this? I run into the same issue, so I would like to know if there is already a solution to this problem
useful-bronzeOP•11mo ago
Unfortunately I didn't find any solution so far.
crude-lavender•11mo ago
resetScroll does not provide what you want
it is for Preventing Scroll Restoration