html - 固定页眉与页内 anchor 重叠

Question

如果我在 HTML 页面中有一个非滚动标题，固定在顶部，具有定义的高度:

有没有办法使用 URL anchor (#fragment 部分)让浏览器滚动到页面中的某个点，但仍然尊重固定元素的高度 没有 JavaScript 的帮助？

http://example.com/#bar

WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

Answer 1

如果您不能或不想设置新类，请添加一个固定高度的 ::before :target 的伪元素CSS 中的伪类:

:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

或者使用 jQuery 滚动相对于 :target 的页面:

var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);