时间戳

首页 > 解决方案 > HTML 锚链接（页内书签）跳转到错误的位置

html - HTML 锚链接（页内书签）跳转到错误的位置

问题描述

我正在尝试学习 HTML（刚刚开始）；为了练习，我正在用 HTML 制作一页笔记。我只是尝试使用书签在顶部创建五个项目的索引。除了一个之外，所有这些都可以工作。

不工作的是<p><a href="#empty_element">Empty element</a></p>. 单击时，它会跳转到图像书签。（图片链接也应该跳转到图片书签。）

索引是按字母顺序排列的，而部分不是，但其中有几个是这样的，它们仍然有效。

stuff只是意味着那里有一堆笔记。如果有人将此示例作为实际的 html 文件进行测试，则任何链接都不起作用。我认为（但不确定）那是因为页面不够长。如果插入 lorem ipsum 段落代替stuff，则可以重现该问题。但我希望有人能在没有它的情况下发现问题所在。

我在这里看到没有width和height属性的图像可能会导致麻烦，所以我将它们添加到图像部分的图像中并将其包含在下面，但它没有帮助。另一条评论说这可能是页面加载问题，但评论超出了我的范围。我没有评论中提到的任何脚本，只有 HTML 和一些 CSS。

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<h2>Index</h2>
<p><a href="#displaying_code">Displaying code</a></p>
<p><a href="#empty_element">Empty element</a></p>
<p><a href="#headings">Headings</a></p>
<p><a href="#images">Images</a></p>
<p><a href="#links">Links</a></p>

stuff
<h2 id="headings">Headings</h2>
stuff
<h2 id="displaying_code">Displaying code:</h2>
stuff
<h2 id="links">Links:</h2>
stuff
<h2 id="images">Images:</h2>
stuff
<img src="shrug.png" width="60" height="60">
<h2 id="empty_element">Empty element:</h2>
stuff

</body>
</html>

这是一个更简单的示例，根据评论中的讨论，尝试查看页面长度是否是问题。

顶部有一个链接，很长的 lorem ipsum 部分，底部有一个标题（目标）。

它仍然无法按预期工作（Vivaldi、Chrome、Edge、Firefox）。

预期：单击链接会导致标题显示在屏幕顶部。

实际：屏幕向上移动刚好足以使标题在页面底部可见。

<!DOCTYPE html>
<html>
<body>

<a href="#one">Section One</a>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisl euismod, ullamcorper neque laoreet, consequat enim. Aenean in aliquam nisi. Sed vel magna non urna mattis feugiat sit amet sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In egestas, dolor a eleifend sollicitudin, tortor dolor ullamcorper lacus, ut feugiat diam est posuere sapien. Nulla blandit vestibulum bibendum. Phasellus suscipit erat lectus, eu molestie sem congue a. Aenean et pulvinar nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin nec rhoncus tortor, et commodo purus.</p>

<h1 id="one">Section One</h1>

</body>
</html>

标签： htmlanchor

解决方案

啊哈，我想这些线索已经解决了。正如亚历克斯在评论中所说，它确实与长度有关，特别是底部的长度。

来自尼尔森诺曼集团的这个页面：

注意页面上最后一段内容。如果最后一段内容很短，并且页面下方的链接或元素很少，则它可能会出现在页面中间而不是页面顶部。如果可能，尽量确保最后一节的内容足够长。

这来自AGConsult：

确保锚链接跳转到每个常用屏幕分辨率的正确子标题。这可能意味着您必须在页面底部添加空白。

在我的原始页面上，最后一部分（“空元素”）确实很短，只有 2 句话。我在它和 之间添加了一段<br>标签</body>，现在所有的锚链接都可以正常工作。通过反复试验，<br>以我笔记本电脑的屏幕分辨率，该特定页面需要大约 24 个标签。

这也解释了为什么我的问题中的第二个代码示例效果如此糟糕 - “第一节”标题下方根本没有任何内容。

推荐阅读