頁面標題與頁面錨點重疊問題的解決方法

Question

如果我在HTML頁面中有一個固定在頂部的非滾動標題，具有定義的高度：

是否有一種方法可以使用URL錨點（#fragment部分）使瀏覽器滾動到頁面中的某個特定位置，但仍然尊重固定元素的高度而無需使用JavaScript的幫助？

http://example.com/#bar

錯誤（但常見行為）： 正確：
 ---------------------------------------------------------------- ----------------
| BAR///////////////////// header | | //////////////////////// header |
 ---------------------------------------------------------------- ----------------
| 這裡是其餘的文字 | | BAR |
| ... | | |
| ... | | 這是其餘的文字 |
| ... | | ... |
 ---------------------------------------------------------------- ----------------

Answer 1

如果您不能或不想設定一個新的類，可以在CSS中為::before偽元素添加一個固定高度的:target偽類：

:target::before {
  content: "";
  display: block;
  height: 60px; /* 固定的标题高度 */
  margin: -60px 0 0; /* 负的固定标题高度 */
}

或使用jQuery相對於:target滾動頁面：

var offset = $(':target').offset();
var scrollto = offset.top - 60; // 减去固定的标题高度
$('html, body').animate({scrollTop:scrollto}, 0);

Answer 2

我遇到了同樣的問題。 我透過為錨點元素添加一個類，並將topbar的高度作為padding-top的值來解決了這個問題。

<h1><a class="anchor" name="barlink">Bar</a></h1>

我使用了以下的CSS：

.anchor { padding-top: 90px; }