Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In a Blazor Web App (.NET 8), links do not change scroll position

I have this strange new scrolling behavior in Blazor (Web App, Interactive render mode = Server) with .NET8.

When clicking on a link, the scroll position is not changed. If a link is clicked far down on a page, the new page is opened on the same scroll position and the user would then have to scroll up himself to see the top of the page. This was not the case with .NET <= 7 / Blazor Server Side.

One workaround I have found so far is to work with an anchor link (e.g. insert <span id ="top"></span> at the top of each page and then add '#top' to all links). But I understandably want to avoid that.

Here's a small repo: https://github.com/Sabbi/BlazorScroll

Just click on the link on the bottom of the page (you should need to scroll down to see it), then the new page is dispayed not from the top.

Any idea how to fix this?

[Update]:

In App.razor, I've changed <Routes /> to <Routes @rendermode="@RenderMode.InteractiveServer" />. Now scrolling is as expected, at the cost that Blazor opens a Websocket-Connection now (which I wanted to avoid since there are no interactive components on the page).

As it behaves different on different rendermodes, I assume it's even more a bug than a feature.

like image 232
Sabbi Avatar asked Oct 19 '25 13:10

Sabbi


1 Answers

I think you can get your desired behaviour by adding this data attribute on your links: data-enhance-nav="false" This tells Blazor not to use enhanced navigation on those links.

like image 114
Esben2000 Avatar answered Oct 22 '25 02:10

Esben2000



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!