Firefox未设置锚点元素焦点，跳转按钮焦点异常问题咨询

这个问题其实是Firefox对锚点跳转的默认行为和Chrome/IE不一致导致的——Chrome和IE在触发锚点跳转后会自动将焦点设置到目标元素上，但Firefox只会滚动到目标位置，不会主动给目标元素设置焦点，这就导致了你遇到的需要反向Tab才能选中按钮的情况。

给你两个可行的解决方案：

方案一：手动通过JS控制焦点和跳转 #

最直接的方式是阻止默认的锚点跳转行为，手动将焦点设置到目标按钮上，同时控制页面滚动到对应位置。代码示例如下：

// 获取跳转链接元素
const skipLink = document.getElementById('skip-link');
// 绑定点击事件
skipLink.addEventListener('click', function(e) {
  // 阻止默认的锚点跳转行为
  e.preventDefault();
  // 获取目标元素
  const targetBtn = document.querySelector(this.getAttribute('href'));
  // 手动给目标按钮设置焦点
  targetBtn.focus();
  // 可选：平滑滚动到目标位置（如果需要的话）
  window.scrollTo({
    top: targetBtn.offsetTop,
    behavior: 'smooth'
  });
});

这样修改后，不管在哪个浏览器里，点击「Skip to play button」链接并按Enter后，焦点都会直接落在目标按钮上，和你预期的行为一致。

方案二：给目标元素添加 tabindex 属性（备用） #

如果不想用JS，也可以尝试给目标按钮添加tabindex="0"（不过按钮本身默认就是可聚焦的，这个方案更多是针对非可聚焦元素的情况），再配合锚点跳转，但这个方案在Firefox里的稳定性不如JS方案，优先推荐方案一。

测试的时候，你可以把这段代码加到你的示例里，就能看到Firefox的焦点行为和Chrome/IE统一了。

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