页面标题与页面锚点重叠问题的解决方法

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; }