.NET8 Blazor Web App服务端交互模式页面跳转滚动异常求助

问题说明 #

使用.NET 8 Blazor Web App（Server交互渲染模式）时，点击页面下方的链接跳转后，新页面会保持原页面的滚动位置，不会自动回到顶部——这和.NET 7及更早版本的Blazor Server Side行为不一致。临时用锚点链接（每页顶部加<span id="top"></span>，链接附加#top）能解决问题，但不够优雅。若将App.razor中的<Routes />改为<Routes @rendermode="@RenderMode.InteractiveServer" />，滚动会恢复正常，但会强制开启WebSocket连接，而页面本身无交互组件，完全不需要这个额外开销。

修复方案 #

方案1：通过导航事件手动重置滚动位置 #

在全局布局组件（比如MainLayout.razor）中，借助NavigationManager监听路由变化，每次导航完成后调用JS将页面滚动到顶部，无需开启全局交互式Server渲染。

代码实现：

@inject NavigationManager NavManager
@inject IJSRuntime JS
@implements IDisposable

<!-- 布局内容 -->

@code {
    protected override void OnInitialized()
    {
        // 订阅路由变化事件
        NavManager.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        // 等待DOM更新完成后执行滚动操作
        InvokeAsync(async () =>
        {
            await JS.InvokeVoidAsync("window.scrollTo", new { top = 0, behavior = "smooth" });
            // 不需要平滑滚动的话，直接用 await JS.InvokeVoidAsync("window.scrollTo", 0, 0);
        });
    }

    public void Dispose()
    {
        // 取消订阅，避免内存泄漏
        NavManager.LocationChanged -= HandleLocationChanged;
    }
}

方案2：针对特定组件启用交互式渲染（按需选择） #

如果页面中只有部分组件需要交互，可以不给全局Routes设置渲染模式，而是仅给需要交互的组件单独添加@rendermode="@RenderMode.InteractiveServer"。这种方式既不会全局开启WebSocket，也能让该组件所在的路由跳转时恢复滚动重置行为——不过如果大部分页面都是静态的，方案1更通用。

问题原因 #

.NET 8 Blazor Web App的混合渲染模式下，静态内容的路由跳转默认没有继承原Blazor Server的滚动重置逻辑，而全交互式Server渲染模式保留了这一行为，因此出现不同模式下的表现差异，这更倾向于设计疏漏而非预期特性。

内容的提问来源于stack exchange，提问作者Sabbi