我的頁面內容中有一個跳過鏈接，允許鍵盤用戶跳過“快速鏈接”部分，簡化的初始代碼如下所示：
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、快速鏈接 div 和 #destination div 在頁面首次加載時都位于視口底部下方。
我期望的行為以及我在 Chrome、Safari 和 Edge 上看到的行為是，當 .skip div 內的錨鏈接獲得焦點時（在這種情況下，當用戶點擊它時），整個鏈接是在視口中可見。事實上，在這些瀏覽器中，它似乎將焦點元素集中在視口中，這是理想的。
這個問題似乎只出在 Firefox 上。我在 Firefox 中看到的行為是，當 .skip div 內的錨鏈接獲得焦點時，.skip div 的頂部位于視口的底部，即剛剛離開螢屏。如果我向下滾動頁面，我可以看到 .skip div 和其中的錨鏈接可見，并且錨鏈接具有焦點。
關于如何在 Firefox 中復制在其他瀏覽器上看到的行為的任何建議？謝謝！
編輯：這是一個復制問題的 JSFiddle： https ://jsfiddle.net/ptdwkzgr/
意外行為似乎只發生在 Firefox 中。我想知道是否有可能讓 Firefox 以預期的方式運行（我在 Chrome、Safari 和 Edge 中看到的行為）。
uj5u.com熱心網友回復：
如果您可以容納一點 JavaScript，則可以使用scrollIntoView API：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/443896.html