偏移同一頁面中的鏈接

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 */

在隨附的問題鏈接上有更詳細的說明。