如何在Blazor WASM页面内实现锚点跳转？

问题根源 #

Blazor WASM的路由系统会拦截所有<a>标签的跳转请求，当你使用href="#0"这类格式时，会被解析为根路由/加上锚点#0，导致跳转到应用根目录；硬写固定路径documentation#@gIndex无效，是因为无法适配动态路由场景（比如当前页面是子路由或带参数的路由）。

解决方案一：结合NavigationManager与JS互操作（推荐，支持地址栏更新） #

这个方案既会更新浏览器地址栏的锚点（保持当前页面路径），又能平滑滚动到目标锚点。

1. 注入必要服务
   在Documentation.razor顶部添加：

@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime

2. 替换原有链接为自定义点击元素
   把原来的<a>标签替换为按钮或带点击事件的链接（阻止默认跳转）：

<!-- 示例：用按钮实现跳转 -->
<button @onclick="() => NavigateToAnchor(gIndex)" class="anchor-link">跳转到锚点@gIndex</button>

<!-- 或保留a标签样式，阻止默认跳转 -->
<a href="#@gIndex" @onclick="(e) => HandleAnchorClick(e, gIndex)" class="anchor-link">锚点@gIndex</a>

3. 实现锚点跳转逻辑
   在@code块中添加方法：

private async Task NavigateToAnchor(int index)
{
    // 获取当前页面的基础路径（移除已有锚点）
    var currentBaseUri = NavManager.Uri.Split('#')[0];
    // 构造带锚点的目标URL
    var targetUri = $"{currentBaseUri}#{index}";
    
    // 更新地址栏（不触发页面重载）
    NavManager.NavigateTo(targetUri, forceLoad: false, replace: true);
    
    // 调用JS滚动到目标锚点
    await JSRuntime.InvokeVoidAsync("scrollToAnchor", index.ToString());
}

// 如果用a标签，需要阻止默认跳转
private async Task HandleAnchorClick(MouseEventArgs e, int index)
{
    e.PreventDefault();
    await NavigateToAnchor(index);
}

4. 添加JS滚动函数
   在wwwroot/index.html的<body>末尾添加：

<script>
function scrollToAnchor(anchorId) {
    const targetElement = document.getElementById(anchorId);
    if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}
</script>

解决方案二：直接JS滚动（无需更新地址栏） #

如果不需要在地址栏显示锚点，可简化为直接调用JS滚动：

1. 注入IJSRuntime

@inject IJSRuntime JSRuntime

2. 绑定点击事件

<button @onclick="() => JSRuntime.InvokeVoidAsync('scrollToAnchor', gIndex.ToString())">跳转到锚点@gIndex</button>

3. 同样添加上述的scrollToAnchor JS函数

注意事项 #

• 确保目标锚点元素的id属性与你跳转的锚点值一致（比如<div id="0">锚点内容</div>）
• 如果使用路由参数或子路由，动态获取当前路径的方式能适配所有场景，避免硬写固定路径的问题

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