javascript - 同一页面内的偏移链接

Question

我在顶部有一个菜单栏，其中包含如下链接:

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

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

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 伪类的更多信息 MDN