Scroll Behavior on page change

[popoleeMaster]

Hello,

I wonder if it would be ok/useful to have an option in router to allow scroll behaviors.

for exemple =>

• keep current scroll on page change
• always go to top on page change

I couldn't find anything in the docs, and this is something that would be nice to handle in the library instead of adding code on each page or some wrapper to always move to top on location change.

[alexey-koran]

Agree with this

[alexey-koran]

@tannerlinsley

[tannerlinsley]

Yeah we need this. We should probably do something similar to Remix’s scroll hook, but agnostic.

[Jarzka]

Any news about this? I think "Scroll to top" should be the default behavior when switching routes as this is the default behavior of how non-SPA web pages work.

[TCM-dev]

I believe this should be a must have feature for this library to actually be used in production by many websites even though right now it's still in beta.
For the people here who use a workaround, how do you do it? Would it work with the scroll restoration feature of tanstack router?

[tannerlinsley]

https://tanstack.com/router/v1/docs/guide/scroll-restoration

[TCM-dev]

I think it should be documentated that the scroll restoration component also resets scroll on page change, from what I can read it should only keep scroll of previous nagivation in memory to restore it later on, that's why I asked if workarounds would work with the scroll restoration feature in the first place.

[tannerlinsley]

Yeah true. I’ll add that to the docs.

[tannerlinsley]

https://tanstack.com/router/v1/docs/guide/scroll-restoration

[Jarzka]

Fixed link: https://tanstack.com/router/latest/docs/framework/react/guide/scroll-restoration

[masnormen]

For anyone coming from Google scratching their heads all weekend wondering why their scroll restoratiom works, but only sometimes:

You might have set a custom height attribute to your html/body tag in your CSS style:

 html,
 body {
-  height: 100%; /* or 100vh or something like that */
   width: 100%;
   ...
 }

Remove the height attribute and hopefully it should work. My theory is that there is a "race" between the time the style applies and the time the scroll begins. Or... maybe just a browser bug. I don't know 🤷‍♂️

Hope this help someone.

Maybe this will be worthy to add to the docs?