Improve interaction between enhanced nav and scroll position

[SteveSandersonMS]

Enhanced nav produces different scroll position behaviors than normal navigation. Ideally it would be approximately the same.

• When clicking a link:
  • Current: Regular navigation scrolls to the top, enhanced nav behaves unpredictably:
    • If you're not doing streaming SSR, then it doesn't scroll to the top
    • If you are doing streaming SSR, then whether or not it scrolls depends on how quickly the streaming completes
  • Ideal: Enhanced nav should scroll to top, except if you're staying on the same page, in which case it should leave the scroll position alone (though it's unclear what we should do if there's streaming SSR - do we restore the scroll pos after streaming completes?)
• When going back/forwards:
  • Current: Regular nav tracks the scroll positions and restores them after backforwards; enhanced nav does not
  • Ideal: Ideally it would somehow track and restore scroll positions

[SteveSandersonMS]

See also #51338 which we closed but is valid

[javiercn]

@SteveSandersonMS do you think we should patch this behavior? or is it fine being something we potentially tackle in 9.0

[SteveSandersonMS]

I was expecting it would be too big of a feature to put into a patch. What's your view?

[ynnob]

@javiercn @SteveSandersonMS
I really dislike the current way this works. So looking at #51338 we should use some js to stop this? But on the other hand i don't think the current behavior of enhanced nav is even correct.

When scrolling down a page and navigating to a link in the footer it is always acting super weird and your scroll position will not even be at the position you were before.

Checkout my page atm. It's running .NET 8 RC2. If you visit my Blazor Page https://ynnob.com/ and go to Privacy Policy and scroll to the footer and navigate to Datenschutz you are not at the bottom anymore. So even that is not working correctly.

EDIT: nvm 🤡 it is working correctly. The Datenschutz page is longer then the privacy policy so it just jumps up. But this is still confusing. So what is the best way to handle this. Always scroll to the top with js?

[Bartmax]

I believe the browser restores scroll when page fully loads, so can't we fake SSR until everything is rendered and let the browser restores the scroll by itself. Actually this will be very aligned to normal (streaming) server render behavior

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[fyitec-james]

I think this needs to be patched in .NET 8. A navigation event should always scroll to the top by default, including same page.

In the linked closed issue, 51338, the comment was made that it would make form submissions weird. The same argument can be made of the current behavior. Regular form submissions almost always scroll to the top when there's an error, where the dotnet Blazor templates even place the validation summary message, or custom scrolling is implemented to jump to a form validation error. Leaving the viewport at the form submit button leaves the user confused on if it went through or not and is a terrible user experience.

The comment was also made that this behavior, not resetting to the top on enhanced navigation, is in line with SPA apps. Which ones exactly? Because React navigation events scroll to the top, and retaining the current position requires implementing additional code:
https://reactrouter.com/en/main/components/scroll-restoration
If this was in reference to just form submissions, which, granted, a React form submission would not cause the scrolling to reset, then at least fix the behavior elsewhere, such as on NavLinks.

Retaining the scroll position should be an optional parameter on NavLinks and NavigationManager.NavigateTo() that defaults to false, and arguably the same on EditForm.

I'm seeing normal scroll position recovery for enhanced navigation on browser back and forward, so no problems there.

Please consider patching this in .NET 8 LTS.

Also, I don't want to sound ungrateful - I appreciate the hard work on .NET 8 Blazor! It's an amazing framework and I'm loving the new Identity pages! ❤️

[ladeak]

I am trying to migrate a prerendered webassembly application to SSR and a few components InteractiveWebAssembly rendered. I am using non-streaming rendering, and I also notice the scroll position is not reset when clicking on anchor tags. This is really unexpected, I would be happy with a patch or a workaround.

I also notice that some of the JS libraries within the webassembly components don't get rendered correctly on navigation.