跳过链接会切断网站顶部的标题

Question

我正在尝试在具有固定标题的网站上实现跳过链接。每当我激活跳过链接（使用锚链接）时，页面顶部就会被切除。

这种情况在整个网站上都在发生，无论ID的主要内容在哪里。

我已经考虑过将锚点添加到span元素，但这将违反最佳做法，并且对屏幕阅读器用户没有帮助。我也不认为这可以解决问题。

我尝试为ID添加填充和边距，但是没有运气。

以下是主题文件中的HTML：

<a href="#main-content" class="button button--skip-link">Skip to main content</a>

这是CSS：

.button--skip-link:not(:focus):not(:hover) {
    -webkit-transform: translateY(-4em);
    -ms-transform: translateY(-4em);
    transform: translateY(-4em);
    opacity: 0;
}

button:focus, 
.button:focus {
    border-color: #062434;
}

button:hover, button:focus, 
.button:hover, .button:focus {
    background-color: #08364E;
    text-decoration: none;
    color: #fff;
}

.button--skip-link {
    margin: 0 auto;
    position: absolute;
    z-index: 20;
    left: 0;
    right: 125em;
    top: 1em;
    width: 10em;
    opacity: 1;
}

我希望“跳过链接”能够使锚链接成为焦点（确实如此）。但是我也希望激活“跳过链接”后，标题的顶部不会被剪切掉。

Answer 1

我并不清楚要达到的目标，但是从我得到的结果来看，这是否就是您想实现的目标：

#header {
  position: fixed;
}

#blue {
  background-color: blue;
  width: 100%;
  height: 600px;
}

#red {
  background-color: red;
  width: 100%;
  height: 600px;
}

<div id="header">
  <a href="#red">Click here to go to red and jump blue</a>
</div>
<br><br>
<div id="blue"></div>
<div id="red"></div>

Answer 2

使跳过链接始终可见。不要为获得可访问性而感到羞耻。

您的跳过链接被隐藏。对于希望直接视觉访问该信息的大多数用户（而无需关注链接）

，它将没有任何用途。

• 使用触摸屏（智能手机）
• 眼睛跟踪设备
• 屏幕放大镜
• 难以使用鼠标的身体残障人士
• 语音识别。...

屏幕阅读器用户会听到一些他们在屏幕上看不到的东西；因为屏幕阅读器用户并非全都是盲人：具有认知障碍的人（例如中风后失语症，如失语症），文盲，非母语的人，...