在 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# 就能搞定。
