修复了页眉与页内锚点重叠的问题

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

有没有办法使用 URL 锚点（#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    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+
  

如果您不能或不想设置新类，请添加固定高度::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before伪元素:target https://developer.mozilla.org/en-US/docs/Web/CSS/:targetCSS 中的伪类：

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

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

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