Blazor 页面导航后自动滚动到顶部的方法

Blazor 页面导航后自动滚动到顶部的核心是监听路由变化并在新页面加载完成时执行 window.scrollTo(0, 0)，推荐使用 NavigationManager.LocationChanged 事件配合 Task.Delay(1) 延迟调用 jsRuntime 滚动，需注意事件订阅清理以防内存泄漏。

Blazor 页面导航后自动滚动到顶部，核心是监听路由变化并在新页面加载完成时触发 window.scrollTo(0, 0)。不同 Blazor 模式（wasm / Server）实现略有差异，但思路一致：利用框架提供的导航生命周期钩子或 JS 互操作。

使用 NavigationManager.LocationChanged 事件（推荐）

这是最通用、无需 JS 互操作的方式，适用于 Blazor WASM 和 Blazor Server。

• 在 _Host.cshtml（Server）或 Program.cs（WASM）中注册全局监听器，或在根组件（如 MainLayout.razor）中处理
• 注意：该事件在导航开始时触发，但 dom 渲染可能尚未完成，所以需延迟执行滚动（例如用 await Task.Delay(1) 或 JSRuntime.InvokeVoidAsync("setTimeout", ...)）
• 示例（放在 MainLayout.razor 中）：

@inject NavigationManager Navigation @inject IJSRuntime JSRuntime 
@code { protected override void OnInitialized() { Navigation.LocationChanged += OnLocationChanged; }
private async void OnLocationChanged(object? sender, LocationChangedEventArgs args) {     // 等待渲染队列清空，确保新页面 DOM 已就绪     await Task.Delay(1);     await JSRuntime.InvokeVoidAsync("scrollTo", 0, 0); }  public void Dispose() {     Navigation.LocationChanged -= OnLocationChanged; }
}

在页面组件中使用 OnAfterRenderAsync（按需补充）
适合需要更精细控制的场景，比如仅对某些页面启用、或配合加载状态判断。

在目标页面组件中重写 OnAfterRenderAsync，结合一个布尔标记（如 shouldScrollToTop）控制只执行一次
首次渲染后滚动，然后重置标记
注意避免无限循环：仅在 firstRender == true 且标记为真时滚动

纯 javaScript 方案（备用）
如果 C# 层时机难以把握，可直接在 JS 中监听 hashchange 或 popstate，或利用 Blazor 的 afterNavigate 全局事件（Blazor 6.0+）。

在 wwwroot/index.html（WASM）或 _Host.cshtml（Server）的  中添加：

 

window.addEventListener('beforeunload', () => {     // 可选：记录离开前位置，用于返回时恢复 }); 
// Blazor 6.0+ 提供的导航完成事件 window.addEventListener('afterNavigate', () => { window.scrollTo(0, 0); });

基本上就这些。优先用 NavigationManager.LocationChanged + Task.Delay(1) 组合，稳定、简洁、不依赖额外 JS。注意清理事件订阅防止内存泄漏，尤其在布局组件中实现时。