Enhanced Navigation does not scroll new page to top

[oliverw]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I believe page navigation in a Blazor Web App should behave identical whether enhanced navigation is turned on or off. In RC2 the destination page will retain the scroll position of the originating page if enhanced navigation is active.

Expected Behavior

No response

Steps To Reproduce

1. Create a Blazor Web App project using the default settings (no auth etc.)

2. Change Components/Pages/Home.razor to this:

@page "/"

<PageTitle>Home</PageTitle>

<div style="height: 4000px">
</div>

<h1>Hello, world!</h1>

Welcome to your new app.

<NavLink class="nav-link" href="weather" style="margin-top: auto">
    <span class="bi bi-list-nested" aria-hidden="true"></span> Weather
</NavLink>

3. Add the fragment below to Components/Pages/Weather.razor between the PageTitle component and the h1:

<div style="height: 4000px">
</div>

4. Run the app and open /
5. Scroll to the bottom and click the link to /weather
6. Observe the scroll position at location /weather

Exceptions (if any)

No response

.NET Version

8.0.100-rc.2.23502.2

Anything else?

No response

[javiercn]

@oliverw thanks for contacting us.

The behavior is deliberate. There are other situations where what you are suggesting results in a bad experience that enhanced navigation tries to improve.

For example, when you scroll down to the bottom of a page and post a form. The browser will "reset" the scroll position, which forces the user to navigate all the way down.

The "goal" of enhanced page navigations is to make the app feel like a SPA, and in such case, the expectation is that clicking a link won't change the scroll position.

If you want to scroll to the top, you can either do it via JavaScript with window.scrollTo(0,0) after each enhancednavigation event happened or with a bit of javascript associated with the link.

[marinasundstrom]

Here is the script that I use:

Blazor.addEventListener('enhancedload', () => {
    window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
});

[oliverw]

@oliverw thanks for contacting us.

The behavior is deliberate. There are other situations where what you are suggesting results in a bad experience that enhanced navigation tries to improve.

For example, when you scroll down to the bottom of a page and post a form. The browser will "reset" the scroll position, which forces the user to navigate all the way down.

The "goal" of enhanced page navigations is to make the app feel like a SPA, and in such case, the expectation is that clicking a link won't change the scroll position.

If you want to scroll to the top, you can either do it via JavaScript with window.scrollTo(0,0) after each enhancednavigation event happened or with a bit of javascript associated with the link.

Allright, fair enough.