fix: router maintains scroll position after navigation

[KingOfTac]

🐛 Bug Report

When using Router, if you have a link towards the bottom of a page that navigates to another route, after navigating to the new route, the scroll position will be at the bottom of the new page

💻 Repro or Code Sample

Will add a functioning example later. Steps to repro are:

1. Create a route in the router config with a page component.
2. Put a link navigating to a new route at the bottom of a long scroll container so that a scrollbar appears.
3. Make sure the second page also has enough content that there is a vertical scrollbar.
4. Go to the first page, scroll to the bottom and click on the link

After the navigation is complete the page's scroll position will not be at the top of the second page.

🤔 Expected Behavior

After navigation the scroll position should be reset to be at the top of the new page.

😯 Current Behavior

After navigation the scroll position is not reset.

💁 Possible Solution

I'm not sure what the best solution would be here so open to ideas. Since the scroll container can really be any element, it would be difficult for Router to reset the scroll position without walking the entire dom tree looking for containers and setting the scroll position.

One possible solution would be to set the scroll position on both the new route's page element, the body element, and on the router itself. This has the drawback of not working at all if the author is using a different element for the primary content scrolling.

Another solution could be to add a 'route-change' event to Router and provide guidance to authors through documentation to listen to that event in order to reset the scroll position where needed. This solution is the most flexible that I can think of at the moment, it still allows authors to build pages however they like and gives them a hook into when navigation happens.

🔦 Context

Building an application with Router where multiple pages have quite a bit of content and links to other pages scattered throughout.

🌍 Your Environment

fast-router - latest alpha fast-element - latest beta fast-foundation - latest alpha adaptive-ui - latest alpha vite - latest

Windows 11 - latest public release Microsoft Edge - latest public release Microsoft Edge - latest canary release

[EisenbergEffect]

What if we created a custom directive that you could put on any HTML element. That directive would subscribe to some event, and then reset the scrolling. Then folks could designate the scroll container and opt into that if they want it. Also, tree-shakeable if they don't use it. Thoughts?

[KingOfTac]

That could work, I'll do some experimentation on my end with a couple of options and add my findings here.