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?

[zigcccc]

I faced the same (similar) problem with the following setup:

export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
  component: RootRouteComponent,
});

export function RootRouteComponent() {
  return (
    <>
      <HeadContent />
      <Navbar />
      <main className="min-h-[70vh]">
        <Outlet />
      </main>
      <Footer />
      <ReactQueryDevtools buttonPosition="bottom-right" />
      <RouterDevtools position="bottom-left" />
    </>
  );
}

the problematic part being min-h-[70vh] on the main element. If I remove that className / style, things work as expected. But it's strange nevertheless. It's worth mentioning that even if I put min-height somewhere other than the root route component, the issue is still there

Tested in Chrome, Safari, Arc, Firefox... and it seems to be present in all browsers, so don't think it has something to do with a browser bug.

Using custom getScrollRestorationKey doesn't seem to help either.

@tannerlinsley any ideas?

[zigcccc]

forgot to mention - I tested for both dev and production builds, and the issue is present in both cases

[schiller-manuel]

can you please create a new github issue including a complete minimal example (ideally forked from one of the existing stackblitz examples)?

[zigcccc]

@schiller-manuel sure, added on to-do for next week!

[zigcccc]

@schiller-manuel here's a StackBlitz link: https://stackblitz.com/edit/tanstack-router-4knyxqcj?file=src%2Froutes%2Findex.tsx

Posting a screen capture outlining the inconsistent behavior - sometimes, it scrolls to the top, whereas sometimes, it doesn't. This is true for both back navigation events as well as clicking on the link directly.

Hope this helps - lmk if you need any extra info/steps etc