Blazor Server中锚点导航至指定元素失效，该如何解决？

Blazor Server的路由系统由客户端侧处理，点击锚点链接时仅会更新URL的哈希部分，但不会触发浏览器默认的锚点滚动行为（该行为仅在页面初始加载时生效），因此需要手动实现滚动逻辑。以下是几种可行的解决方法：

方法一：JavaScript互操作直接触发滚动 #

这是最直接的实现方式，通过调用JS函数定位到目标元素：

1. 在wwwroot/js目录下创建scrollUtils.js文件，添加滚动逻辑：

window.scrollToElement = function(elementId) {
    const target = document.getElementById(elementId);
    if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}

2. 在Pages/_Host.cshtml中引入该JS文件：

<script src="~/js/scrollUtils.js"></script>

3. 修改Blazor页面代码，替换默认链接的点击事件：

@page "/test"
@inject IJSRuntime JSRuntime

<nav>
    <!-- 普通a标签 -->
    <a @onclick="() => ScrollToSection("section2")">Section2</a>

    <!-- NavLink标签（需要阻止默认导航行为） -->
    <NavLink @onclick:preventDefault @onclick="() => ScrollToSection("section2")">Section2</NavLink>
</nav>

<!-- 目标锚点元素 -->
<h2 id="section2">It's Section2.</h2>

@code {
    private async Task ScrollToSection(string elementId)
    {
        await JSRuntime.InvokeVoidAsync("scrollToElement", elementId);
    }
}

方法二：监听NavigationManager的位置变化自动滚动 #

该方法保留原生锚点链接的URL更新行为，同时自动触发滚动：

@page "/test"
@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime
@implements IDisposable

<nav>
    <a href="#section2">Section2</a>
    <NavLink href="#section2">Section2</NavLink>
</nav>

<h2 id="section2">It's Section2.</h2>

@code {
    protected override void OnInitialized()
    {
        // 订阅位置变化事件
        NavManager.LocationChanged += HandleLocationChanged;
    }

    private async void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        // 提取URL中的哈希锚点
        var fragment = NavManager.ToAbsoluteUri(e.Location).Fragment;
        if (!string.IsNullOrEmpty(fragment) && fragment.StartsWith('#'))
        {
            var targetId = fragment.Substring(1);
            await JSRuntime.InvokeVoidAsync("scrollToElement", targetId);
        }
    }

    // 销毁时取消订阅
    public void Dispose()
    {
        NavManager.LocationChanged -= HandleLocationChanged;
    }
}

（注：该方法同样需要引入方法一中的scrollUtils.js文件）

方法三：利用组件渲染生命周期处理 #

如果是页面加载时的锚点跳转，可以在组件渲染完成后触发滚动：

@page "/test"
@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime

<nav>
    <a href="#section2">Section2</a>
    <NavLink href="#section2">Section2</NavLink>
</nav>

<h2 id="section2">It's Section2.</h2>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 首次渲染或导航后触发
        var anchor = NavManager.Uri.Split('#').LastOrDefault();
        if (!string.IsNullOrEmpty(anchor) && anchor != NavManager.Uri)
        {
            await JSRuntime.InvokeVoidAsync("scrollToElement", anchor);
        }
    }
}

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