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

问题描述 投票:0回答:1

我正在努力学习HTML(刚开始);为了练习,我正在用HTML做一页笔记。我刚刚试着用书签在最上面做了一个五个项目的索引。除了一个之外,其他的都能用。

没有用的那个是 <p><a href="#empty_element">Empty element</a></p>. 当点击时,它会跳转到 "图像 "书签。图片链接也会跳转到图片书签,这是应该的)。

索引是按字母顺序排列的,栏目不是,但有几个栏目是这样的,还能用。

stuff 只是意味着那里有一堆笔记。如果有人将这个样本作为一个实际的html文件进行测试,所有的链接都无法使用。我想(但不确定)这是因为页面不够长。如果在这个页面上插入一些段落,以代替 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>

这里有一个更简单的例子,根据评论中的讨论,试着看看是否是页面长度的问题。

顶部有一个链接,一个很长的章节,底部有一个标题(目标)。

它仍然不能像预期的那样工作(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>
html anchor
1个回答
0
投票

啊哈,我想这些线索已经解决了。这确实和长度有关,正如Alex在评论中所说,特别是底部部分的长度。

来自 本页由尼尔森-诺曼集团提供。:

注意页面上的最后一节内容。如果最后一部分内容很短,而且页面上的链接或下面的元素很少,那么它有可能出现在页面的中间而不是顶部。在可能的情况下,尽量保证最后一部分的内容足够长。

而这从 AGConsult:

确保锚链接在每一个常用的屏幕分辨率下跳到正确的小标题。这可能意味着你必须在页面底部增加白色空间。

在我的原始页面上,最后一节("空元素")确实很短,只有2句话。我添加了一节 <br> 间的标签。</body>,现在所有的锚链接都能完美运行。通过试错,花了大约24 <br> 标签,而我的笔记本的屏幕分辨率又不符合该页面的要求。

这也解释了为什么我问题中的第二个代码示例工作得如此糟糕--"Section One "标题下面根本没有任何内容。

© www.soinside.com 2019 - 2024. All rights reserved.