HTML anchor link (within-page bookmark) 跳到错误的地方

HTML anchor link (within-page bookmark) jumps to the wrong spot

我正在努力学习HTML(刚开始);为了练习,我在 HTML 中做了一页笔记。我只是尝试使用书签在顶部制作五个项目的索引。除了一个,其他都可以。

不工作的是 <p><a href="#empty_element">Empty element</a></p>。单击时,它会跳转到图像书签。 (图像 link 也应该跳转到图像书签。)

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

stuff 只是意味着那里有一堆笔记。如果有人将此示例作为实际 html 文件进行测试,则 link 中的 none 将起作用。我认为(但不确定)那是因为页面不够长。如果在 stuff 的位置插入 lorem ipsum 的段落,则可以重现问题。但我希望有人能在没有它的情况下发现问题所在。

我看到 here 没有 widthheight 属性的图片会引起麻烦,所以我将它们添加到图片部分的图片中,并将其包含在下面,但它没有帮助。另一条评论说这可能是 page-loading 问题,但评论超出了我的范围。我没有评论中提到的任何脚本,只有 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>

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

顶部有一个 link,一段很长的 lorem ipsum,底部有一个标题(目标)。

它仍然没有按预期工作(Vivaldi、Chrome、Edge、Firefox)。

预期:单击 link 会导致标题显示在屏幕顶部。

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

<!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>

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

来自this page by the Nielsen Norman Group

Pay attention to the last section of content on the page. If the last piece of content is short and there are few links or elements beneath it on the page, it is possible it will appear in the middle rather than at the top of the page. When possible, try to ensure that the content for that last section is long enough.

这来自 AGConsult

Make sure the anchor links jump to the right sub-heading in every commonly used screen resolution. This may mean you have to add white space at the bottom of the page.

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

这也解释了为什么我的问题中的第二个代码示例效果如此糟糕——"Section One" 标题下面什么也没有。