HTML 锚链接(页内书签)跳转到错误的位置



我正在尝试学习HTML(刚刚开始(;为了练习,我正在用HTML做一页笔记。我只是尝试使用书签在顶部制作五个项目的索引。除了一个之外,它们都有效。

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

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

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

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

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

来自尼尔森诺曼集团的此页面:

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

这是来自AGConsult的:

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

在我的原始页面上,最后一部分("空元素"(确实很短,只有两句话。我在它和</body>之间添加了一段<br>标签,现在所有的锚链接都可以完美运行。通过反复试验,以笔记本电脑的屏幕分辨率,该特定页面花了大约 24 个<br>标签。

这也解释了为什么我问题中的第二个代码示例工作得如此糟糕 - "第一部分"标题下方根本没有任何东西。

最新更新