偏移同一页面中的链接

Question

我在顶部的菜单栏具有以下链接：

<a href="#1">Football</a>
<a href="#2">Cricket</a>
<a href="#3">Rugby</a>
<a href="#4">Tennis</a>

我有一个固定的菜单栏，高度为50px。 单击链接后，标题将隐藏在固定菜单栏的后面。 单击相应的链接时，标题是否可以低50px显示（以便显示）。

HTML：

<h2 class="menuheading" id="1">Football</h2>
...
<h2 class="menuheading" id="2">Cricket</h2>
...
<h2 class="menuheading" id="3">Rugby</h2>
...
<h2 class="menuheading" id="4">Tennis</h2>

Answer 1

您可以始终在标题上使用padding-top/margin-top ，或者（仅在现代浏览器中）仅在定位目标时使用-例如，根据您的要求

h2:target {
  padding-top: 50px;
}

有关:target DN上MDN的更多信息

Answer 2

将此添加到您的CSS样式中作为menuheading

.menuheading {
  margin-top:50px;
}

Answer 3

可能与此重复... 滚动时如何使菜单栏固定在顶部

发生的是默认情况下，body标签被加载到页面顶部，因此您所要做的就是

body {margin-top:50px;} /* Same height as the menu bar */

在随附的问题链接上有更详细的说明。