Blazor WebApp（.NET 8）中FocusOnNavigate无法滚动到指定选择器问题

这是一个已知问题，对应的修复已在ASP.NET Core的代码提交中完成。

问题复现步骤 #

• 在Home、Counter、Weather示例页面中添加以下代码拉长页面：

  <br />
  <div style="height:1500px; background-color:bisque"></div>
  <br />
  

• 滚动到页面底部后，通过左侧菜单跳转到其他页面，页面会停留在原滚动位置，即便已正确配置：

  <FocusOnNavigate RouteData="@routeData" Selector="h1" />
  

问题原因与修复说明 #

对应的代码提交解决了增强导航模式下FocusOnNavigate失效的问题：

• 此前的逻辑是在页面新内容更新前就执行聚焦操作，导致选择器无法匹配到目标元素；
• 修复后调整为在新内容渲染完成后再聚焦指定元素，同时确保即使目标元素已在视口中（但因滚动位置保留而被滚过），也会自动滚动到该元素区域。

解决方案 #

1. 升级到包含该修复的.NET 8补丁版本；
2. 若暂时无法升级，可通过自定义JS脚本手动处理：

   window.addEventListener('blazornavigationend', () => {
       const targetElement = document.querySelector('h1');
       if (targetElement) {
           targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
           targetElement.focus();
       }
   });
   

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