在 Firefox 中跳过不在视口中的页面内容中的 link

Question

我在我的页面内容中有一个 skip link 以允许键盘用户跳过“快速 links” 部分，简化的初始代码如下所示：

HTML:

<body>
  <div>A div with some content.</div>
  <div>A div with some content.</div>
  <div class="skip">
    <a href="#destination">Skip quick links navigation</a>
  </div>
  <div>Quick links navigation.</div>
  <div id="destination">A div with some content.</div>
  <div>A div with some content.</div>
  <div>A div with some content.</div>
</body>

CSS:

.skip a {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
.skip a:focus {position: static; width: auto; height: auto; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 4px solid #0067a5; color: #0067a5; display: block; font-size: 1.75em; line-height: 1.1; padding: 1em; text-align: center;}

.skip div 上面的内容足够长，.skip div、quick links div 和#destination [=44] =] 都在页面首次加载时位于视口底部下方。

我期望的行为以及我在 Chrome、Safari 和 Edge 上看到的行为是，当 .skip div 中的锚点 link 获得焦点时（在这种情况下，当用户切换到它时），整个 link 在视口中可见。事实上，在这些浏览器中，它似乎使焦点元素在视口中居中，这很理想。

问题似乎只出在 Firefox 上。我在 Firefox 中看到的行为是，当 .skip div 中的锚点 link 获得焦点时，.skip div 的顶部位于视口的底部，即就在屏幕外。如果我向下滚动页面，我可以看到其中的 .skip div 和锚点 link 是可见的，并且锚点 link 具有焦点。

关于如何在 Firefox 中复制在其他浏览器上看到的行为有什么建议吗？谢谢！

编辑：这是一个复制问题的 JSFiddle： https://jsfiddle.net/ptdwkzgr/

意外行为似乎只发生在 Firefox 中。我想知道是否有可能让 Firefox 以预期的方式运行（我在 Chrome、Safari 和 Edge 中看到的行为）。

Answer 1

如果你能容纳一点JavaScript那么scrollIntoView API can be used:
demo on jsfiddle

document.addEventListener('DOMContentLoaded', init);

function init() {
  let lnk = document.querySelector('.skip a');
  lnk.addEventListener('focus', () => lnk.scrollIntoView({block: "center"}) );
}

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}

.skip a {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip a:focus {
  position: static;
  width: auto;
  height: auto;
  background: rgb(255, 255, 255) none repeat scroll 0% 0%;
  border: 4px solid #0067a5;
  color: #0067a5;
  display: block;
  font-size: 1.75em;
  line-height: 1.1;
  padding: 1em;
  text-align: center;
}

#quick-links-section-con {
  display: block;
  overflow: hidden;
  width: 100%;
  background-color: #7A8C99;
}

.quick-links-section {
  float: left;
  width: 33.33%;
}

.content {
  height: 100vh;
  word-spacing: 50px;
}

<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In finibus ligula in congue laoreet. In mi odio, efficitur quis lectus id, euismod fermentum arcu. Proin vel ipsum quis quam tincidunt maximus. Curabitur quis convallis risus. Nunc vel eleifend
    mi. Mauris facilisis ligula eget pretium mollis. Maecenas lacus mi, iaculis at efficitur vel, tempor sed neque.
  </p>
</div>

<div class="skip">
  <a href="#destination">Skip quick links navigation</a>
</div>

<div id="quick-links-section-con">
  <div class="quick-links-section">
    <p>Lorem</p>
    <ul>
      <a href="#">
        <li>Ipsum</li>
      </a>
      <a href="#">
        <li>Dolor</li>
      </a>
      <a href="#">
        <li>Sit</li>
      </a>
      <a href="#">
        <li>Amet</li>
      </a>
      <a href="#">
        <li>Consectetur</li>
      </a>
      <a href="#">
        <li>Adipiscing</li>
      </a>
    </ul>
  </div>
  <div class="quick-links-section">
    <p>Elit</p>
    <ul>
      <a href="#">
        <li>Ipsum</li>
      </a>
      <a href="#">
        <li>Dolor</li>
      </a>
      <a href="#">
        <li>Sit</li>
      </a>
      <a href="#">
        <li>Amet</li>
      </a>
      <a href="#">
        <li>Consectetur</li>
      </a>
      <a href="#">
        <li>Adipiscing</li>
      </a>
    </ul>
  </div>
  <div class="quick-links-section">
    <p>Finibus</p>
    <ul>
      <a href="#">
        <li>Ipsum</li>
      </a>
      <a href="#">
        <li>Dolor</li>
      </a>
      <a href="#">
        <li>Sit</li>
      </a>
      <a href="#">
        <li>Amet</li>
      </a>
      <a href="#">
        <li>Consectetur</li>
      </a>
      <a href="#">
        <li>Adipiscing</li>
      </a>
    </ul>
  </div>
</div>
<div id="destination" class='content'>
  <p>
    Morbi consectetur massa quis metus tempor accumsan. Phasellus gravida, ante at sodales molestie, dolor sem auctor nisi, in tempus sapien felis id nisi. Maecenas dapibus suscipit metus vel euismod. In sed erat sodales felis blandit varius non eget ante.
   
  </p>

</div>
<div>A div with some content.</div>
<div>A div with some content.</div>

在 Firefox 中跳过不在视口中的页面内容中的 link

Skip link within page content not in viewport on focus in Firefox

html

css

firefox

accessibility