极客观点
项目管理
HarmonyOS
我目前正在构建一个网页，其中一些元素放置在靠近顶部边缘的固定位置。因此，每当我导航到锚点时，它们都会被放置在那些固定元素的正下方。我想知道是否有某种样式或其他方法在导航到锚点时会发生一些额外的偏移量/边距？
示例源代码
<html>
<body>
<div style="position:fixed; top:0px; height:100px; background:white;">
This covers the top 100px of the screen.
</div>
<div style="position:absolute; top:0px;">
<div>
<a name="foo" id="foo"><h2>Foo</h2></a>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores e
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
</p>
</div>
<div>
<a name="bar" id="bar"><h2>Bar</h2></a>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
</p>
</div>
</div>
</body>
</html>
假设此 HTML 在 http://example.com/foobar.html 可用，可以链接到 http://example.com/foobar.html/#bar—— 浏览器将滚动到名为/id“bar”的锚点。但是在这个例子中有一个 100px 高的固定元素，它会遮挡“Bar”内容的上部。现在我想要一些样式/选项来告诉浏览器，不要将元素滚动到文档窗口的顶部，而是要保留一定的“滚动边距”（在本例中为大约 200 像素的滚动边距）。这与元素边距无关，因为它们会影响布局。但这与布局无关，而是为滚动行为提供提示。
原文由 datenwolf 发布，翻译遵循 CC BY-SA 4.0 许可协议
scroll-margin-top 现在是一个很好的解决方案（2022 年）