多锚点链接Tab键盘导航异常问题求助

核心思路 #

点击锚点跳转后，手动将焦点转移到锚点所在区域的第一个可聚焦元素（或锚点目标本身），让后续Tab导航从当前屏幕可见区域开始，而非回到顶部的链接组。

具体实现方案 #

方案1：轻量HTML+内联脚本（适合少量锚点） #

• 给锚点目标元素添加tabindex="-1"，使其可被脚本聚焦但不干扰默认Tab流：

  <div id="section1" tabindex="-1">
    <!-- 章节内容 -->
  </div>
  

• 给顶部的锚点链接添加点击事件，跳转后立即聚焦目标：

  <a href="#section1" onclick="setTimeout(() => document.getElementById('section1').focus(), 50);">章节1</a>
  

  若目标是原生可聚焦元素（如<button>、<a>），可省略tabindex="-1"，直接聚焦即可。

方案2：通用JS批量处理（多锚点场景首选） #

写一段脚本自动处理所有页面内锚点链接，无需逐个修改：

document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', () => {
    setTimeout(() => {
      const targetId = link.getAttribute('href').slice(1);
      const target = document.getElementById(targetId);
      if (!target) return;

      // 给不可聚焦元素临时添加tabindex
      if (!target.hasAttribute('tabindex')) {
        target.setAttribute('tabindex', '-1');
        // 移除焦点后清除tabindex，避免影响后续行为
        target.addEventListener('blur', () => target.removeAttribute('tabindex'), { once: true });
      }
      target.focus();
      // 可选：微调滚动位置，避免被顶部导航栏遮挡
      window.scrollBy(0, -70);
    }, 80); // 延迟确保页面跳转完成
  });
});

这段脚本会在锚点跳转完成后，自动将焦点转移到目标区域，后续Tab就会从该区域附近的元素开始导航。

方案3：CSS视觉反馈（可选增强） #

给锚点目标区域添加聚焦时的样式，让用户明确当前焦点位置：

[id^="section"]:focus {
  outline: 2px solid #2563eb;
  outline-offset: 4px;
}

问题根源 #

浏览器默认会将焦点保留在触发跳转的锚点链接上，下一次Tab会继续选中同组的下一个链接，导致页面跳回顶部。通过手动转移焦点到目标区域，就能打破这个默认导航逻辑。

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