HTML 书签链接/Blazor 锚链接滚动到顶部我的内容隐藏在应用栏中

Question

我试图为某些内容创建锚链接或书签。我的问题是单击书签 href 链接时，它会滚动并将我带到正确的内容，但我的问题是某些内容隐藏在应用栏区域内，并且 Blazor 页面上抛出未处理的错误。 Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常呈现组件：无法将值“7900#headerC”解析为“Wid”的类型“System.Int32”。 System.InvalidOperationException：无法将值“7900#headerC”解析为“Wid”的“System.Int32”类型。

复制链接：https://try.mudblazor.com/snippet/wOmevkccSpKqHzBw

我在 blazor 演示页面中尝试了与 trysnippet 相同的操作，只需将 AnchorNavigation 标记添加到我的演示页面，并在 index.html 中添加 javascript BlazorScrollToId，其他内容与 trysnippet 相同，并且其工作方式在两者中都是相同的。

blazor 锚链接参考： https://www.meziantou.net/anchor-navigation-in-a-blazor-application.htm

Answer 1

要解决 Blazor 应用程序中的锚链接问题（内容隐藏在 AppBar 后面并且遇到错误），您可以实现考虑 AppBar 高度的自定义滚动机制。这涉及两个主要步骤：导航到锚链接后调整滚动位置并确保不会出现 ID 解析问题。

这是一个逐步解决方案：

第一步：调整滚动位置 您可以创建一个 JavaScript 函数，在导航到锚链接后调整滚动位置以适应 AppBar 的高度。

在index.html或单独的JavaScript文件中创建JavaScript函数：

// Function to scroll to the element with an offset
function scrollToAnchor(anchorId) {
    const headerOffset = document.querySelector('.appbar').offsetHeight; // Replace '.appbar' with your AppBar class or ID
const element = document.getElementById(anchorId);
if (element) {
    const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
    const offsetPosition = elementPosition - headerOffset;

    window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth' // Optional: for smooth scrolling
    });
}
}

第 2 步：从 Blazor 调用 JavaScript 函数 在 Blazor 组件中，您可以调用 JavaScript 函数来滚动到特定的锚链接：

导航到锚链接后调用 JavaScript 函数。您可以在 OnAfterRenderAsync 生命周期方法中执行此操作：

@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
            var fragment = uri.Fragment.TrimStart('#');

            if (!string.IsNullOrEmpty(fragment))
            {
                await JSRuntime.InvokeVoidAsync("scrollToAnchor", fragment);
            }
        }
    }
}

第 3 步：更新锚链接 确保您的锚链接已正确设置以指向正确的 ID：

<a href="#headerC" @onclick="() => ScrollTo('headerC')">Go to Header C</a>
...
<div id="headerC">
    <!-- Your content for Header C -->
</div>

第 4 步：避免解析错误 要解决有关解析 7900#headerC 的错误，请确保正确处理可能需要整数（如 Wid 属性）的任何操作或数据绑定，并且锚链接不会干扰 Blazor 的状态管理。确保您的 ID 是唯一的并且不会造成冲突。

Blazor 组件中的示例 完整组件的外观如下：

@page "/example"
@inject IJSRuntime JSRuntime

<h3>Example Page</h3>
<a href="#headerC" @onclick="() => ScrollTo('headerC')">Go to Header C</a>

 <div style="height: 200vh;"> <!-- Just for scrolling effect -->
    Scroll Down
</div>

<div id="headerC" style="background-color: lightgrey; padding: 20px;">
    <h2>Header C</h2>
    <p>Your content goes here...</p>
</div>

  @code {
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
        if (firstRender)
        {
            var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
            var fragment = uri.Fragment.TrimStart('#');

            if (!string.IsNullOrEmpty(fragment))
            {
                await JSRuntime.InvokeVoidAsync("scrollToAnchor", fragment);
            }
        }
    }
}