如果我在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    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

当前回答

我用anchor元素的scroll-margin-top属性解决了这个问题

scroll-margin-top: 100px;

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top

其他回答

我发现处理这个问题的最好方法是(用固定的元素高度替换65px):

div:target {
  padding-top: 65px; 
  margin-top: -65px;
}

如果你不喜欢使用目标选择器,你也可以这样做:

.my-target {
    padding-top: 65px;
    margin-top: -65px;
}

注意:如果目标元素的背景色与父元素的背景色不同,这个例子将不起作用。 例如:

<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>

在这种情况下,我的目标元素的绿色将覆盖65px的父元素红色。 我没有找到任何纯CSS解决方案来处理这个问题,但如果你没有另一个背景色,这个解决方案是最好的。

我认为这种方法更有用:

<h2 id=“bar” title=“Bar”>Bar</h2>

[id]:target {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}

[id]:target::before {
    content: attr(title);
    top: 120px;
    position: relative;
    visibility: visible;
}

一个非常简单的CSS答案是把它放在你的样式表的顶部:

a{padding-top: 90px;}
a:link{padding-top: unset;}

第一种样式管理所有锚标记,第二种样式使用超链接锚标记。

注意:这目前适用于Firefox和Edge,但不适用于Chrome。

我没有看到简单地使用:target作为一个选项列出。我发现

:目标{margin-top: -100px;padding-top: 100 px;}

似乎在提供的场景中工作。:target也兼容所有现代浏览器。https://caniuse.com/?search=%3Atarget

我也有同样的问题。 我通过向锚元素添加一个类来解决这个问题,并将topbar高度作为padding-top值。

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

我使用这样的CSS:

.anchor { padding-top: 90px; }