Blazor中实现“滚动到顶部”需通过JS Interop调用window.scrollTo或scrollIntoView方法：在JS中定义scrollToTop函数，C#中注入IJSRuntime并调用；也可滚动到指定元素ID；路由跳转后需监听LocationChanged事件自动触发。
在 Blazor 中实现“滚动到顶部”功能很简单，核心是调用浏览器原生的 scrollTo 或 scrollIntoView 方法，通过 JS Interop 从 C# 触发。
使用 JS Interop 调用 window.scrollTo
这是最直接、兼容性最好的方式。先在 wwwroot/js/site.js（或任意 JS 文件）中添加一个滚动函数：
window.scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};然后在 Blazor 组件（如 .razor 文件）中注入 IJSRuntime 并调用：
@inject IJSRuntime JSRuntime
<p>@code {
private async Task OnClickScrollToTop()
{
await JSRuntime.InvokeVoidAsync("scrollToTop");
}
}</p>在按钮或链接中使用：
<button @onclick="OnClickScrollToTop">回到顶部</button>
滚动到某个元素（如页面顶部的 div）
如果希望滚动到特定元素（比如一个带 id="top" 的容器），可以这样写：
<div id="top"></div> <!-- 页面内容 -->
JS 端定义：
window.scrollToElement = (elementId) => {
const el = document.getElementById(elementId);
if (el) {
el.scrollIntoView({ behavior: 'smooth' });
}
};C# 端调用：
await JSRuntime.InvokeVoidAsync("scrollToElement", "top");自动在导航后滚动到顶部（SPA 路由场景）
Blazor WebAssembly 或 Server 的路由跳转不会自动滚回顶部，需监听导航事件：
- 在
App.razor或根组件中注入NavigationManager - 订阅
LocationChanged事件，在每次导航后触发滚动 - 注意避免重复注册，建议在
OnInitialized注册，Dispose解绑
示例代码片段：
@inject NavigationManager Navigation
@implements IDisposable
<p>@code {
protected override void OnInitialized() =>
Navigation.LocationChanged += OnLocationChanged;</p><pre class="brush:php;toolbar:false;">private async void OnLocationChanged(object? sender, LocationChangedEventArgs e) =>
await JSRuntime.InvokeVoidAsync("scrollToTop");
public void Dispose() =>
Navigation.LocationChanged -= OnLocationChanged;}
注意事项
- 确保 JS 函数在页面加载完成后再调用，Blazor 通常已满足此条件
-
behavior: 'smooth'在部分旧浏览器中不支持，可降级为'auto' - Server 渲染模式下，JS Interop 需等待连接建立，建议加
try/catch或判断JSRuntime是否可用 - 若使用第三方布局组件（如 MudBlazor、AntDesign），部分已内置
ScrollToTop按钮，可直接启用
基本上就这些。不需要额外库，几行 JS + 几行 C# 就能搞定。
