Blazor WebAssembly页面内锚点导航失效问题求助

问题原因 #

Blazor作为单页应用，会拦截所有<a>标签的点击事件进行客户端路由处理。当你点击导航链接时，虽然地址栏会更新锚点，但Blazor不会自动触发浏览器原生的锚点滚动逻辑，导致页面回到顶部而非目标位置。直接在地址栏输入URL时，属于浏览器初始加载流程，会正常处理锚点；但点击链接属于Blazor客户端导航，因此需要手动干预滚动行为。

另外，你之前使用href="SelfServiceOrder/#menucontent+@menuid"的写法存在路径问题：如果当前页面已经是SelfServiceOrder，相对路径会导致路由解析错误，这也是直接用#menucontent+@menuid跳转到根路径的原因。

解决方案 #

方案1：手动处理点击事件+JS滚动 #

通过阻止Blazor的默认导航行为，手动更新地址栏锚点并调用JS实现滚动：

1. 在组件中注入依赖服务：

@inject NavigationManager NavManager
@inject IJSRuntime JS

2. 修改导航链接代码：

<div class="topnavbar">
    <nav id="navbar-topmenu" class="navbar navbar-light bg-light px-3">
        <ul class="nav nav-underline">
            @if (SQL.menus.Count > 0)
            {
                foreach (KeyValuePair<int, MainMenu> m in SQL.menus)
                {
                    if (m.Value.Disabled == false)
                    {
                        string menuname = m.Value.Name.ToString();
                        string anchorId = $"menucontent+{m.Value.ID}";
                        <li class="nav-item" style="list-style-type: none; margin-top: 1em">
                            <a class="nav-link" href="#@anchorId" 
                               @onclick="(e) => HandleAnchorClick(e, anchorId)">
                                @menuname
                            </a>
                        </li>
                    }
                }
            }
        </ul>
    </nav>
</div>

3. 添加处理逻辑和JS调用：

@code {
    private async Task HandleAnchorClick(MouseEventArgs e, string anchorId)
    {
        // 阻止Blazor默认导航拦截
        e.PreventDefault();
        // 更新地址栏锚点（保持当前页面路径）
        var currentPath = NavManager.Uri.Split('#')[0];
        NavManager.NavigateTo($"{currentPath}#{anchorId}", forceLoad: false);
        // 调用JS滚动到目标元素
        await JS.InvokeVoidAsync("scrollToAnchor", anchorId);
    }
}

4. 在wwwroot/js/site.js（或自定义JS文件）中添加滚动函数：

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

方案2：使用NavLink组件+自动滚动 #

如果希望保留Blazor的NavLink样式状态（如激活态），可以结合NavLink和滚动逻辑：

@inject NavigationManager NavManager
@inject IJSRuntime JS

<div class="topnavbar">
    <nav id="navbar-topmenu" class="navbar navbar-light bg-light px-3">
        <ul class="nav nav-underline">
            @if (SQL.menus.Count > 0)
            {
                foreach (KeyValuePair<int, MainMenu> m in SQL.menus)
                {
                    if (m.Value.Disabled == false)
                    {
                        string menuname = m.Value.Name.ToString();
                        string anchorId = $"menucontent+{m.Value.ID}";
                        var linkHref = $"{NavManager.Uri.Split('#')[0]}#{anchorId}";
                        <li class="nav-item" style="list-style-type: none; margin-top: 1em">
                            <NavLink class="nav-link" href="@linkHref" 
                                     @onclick="() => ScrollToAnchor(anchorId)">
                                @menuname
                            </NavLink>
                        </li>
                    }
                }
            }
        </ul>
    </nav>
</div>

@code {
    private async Task ScrollToAnchor(string anchorId)
    {
        // 等待Blazor完成导航状态更新
        await Task.Delay(100);
        await JS.InvokeVoidAsync("scrollToAnchor", anchorId);
    }
}

关键注意事项 #

• 确保目标菜单项的id属性与锚点字符串完全匹配，比如目标元素必须是<div id="menucontent+6">这样的格式。
• 不要使用相对路径拼接锚点，直接基于当前页面路径更新锚点即可避免路由错误。
• 如果需要平滑滚动，确保JS中的scrollIntoView配置了behavior: 'smooth'。

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