Javascript 同一页面内的偏移链接

我在顶部有一个菜单栏，其链接如下：

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

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

html:

足球
...
板球
...
橄榄球
...
网球

将此添加到您的CSS样式中，用于

菜单标题

.menuheading {
  margin-top:50px;
}

---

您可以始终在标题上应用

填充顶部/页边空白顶部

，或者（在现代浏览器中）仅在标题有目标时应用（如您所要求的）

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

---

有关

的更多信息：目标

上的伪类

此的可能副本

默认情况下，body标记加载在页面顶部，因此您只需将

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

---

它将在附加的问题链接中详细介绍。

不，这不会解决问题，因为标题将始终包含在内。也许只有在你先回答的时候，你才能得到最好的答案！谢谢你的帮助

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