Scroll Restoration behavior

[QuentinWidlocher]

Hi everyone, I'm having a hard time understanding how the scroll restoration works.
I've got a <ScrollRestoration/> tag in my root.tsx at the end of my body, just before my <Scripts/> tag like the doc says.

I have a list of links on a route (A), and when I scroll a bit and click on a link, it opens my new page (B) but already scrolled down, as much as the first page (A).

What I'd want is to always go to the top of the page for a specific route (A) and keep the scrolled position on another (B).

I tried to remove the <ScrollRestoration/> tag but didn't see much change. Could someone explain how does it works please ?

[sergiodxa]

The ScrollRestoration is not for new navigations, but for going back, if you scroll on a page, go to another page, and then go back (with the browser back button) it will restore the scroll to where the user was before going to the second page

[QuentinWidlocher]

That's perfect !
So why do I have this strange behavior ?
Navigating to a new route don't put me at the top of the page 🤔

[ryanflorence]

The behavior is the same as the browser, and it's based on locations, not URLs.

1. Push navigations (new location) scrolls to the top
2. Pop navigations (browser back/forward button clicks) will restore the position for that location (not URL)

For example:

1. User lands on / and scrolls down 100px
2. User clicks a link /contact
   • Scroll is moved to top
3. User scrolls down 200px
4. User clicks a link to /
   • scroll is moved to the top
   • while it is the same URL as (1) it is not the same "location", it's a new location so scroll is reset to the top
5. User clicks "back" to "/contact"
   • scroll is restored to 200px from (3)
6. User clicks "back" to "/"
   • scroll is restored to 100px from (1)

If you are not experiencing this behavior then something is wrong with your app or we have a bug that isn't manifesting for many people.

[QuentinWidlocher]

Thank you for your explanation, it's not the behavior I'm experiencing and I cannot find the reason for it.
Of course, it's probably a problem on my side, but I don't have any clue.

[QuentinWidlocher]

Ok I got it !
I'm using a grid layout to keep a navbar and a footer always visible on the screen, and <ScrollRestoration/> scrolls the window instead of my inner div (of course)

I'm going to implement my own scroll restoration, but what do you think about passing an optional node to ?

[lili21]

Can I restore the position while push navigation?

Image a page like this

Each tab is a link/route. while user can scroll the page and click the tab2, I would like to keep the scroll position and render the tab2 content.