Question

我在一个网站上工作，该网站使用哈希监听器来显示和隐藏内容DIV并滚动到同名的命名锚点。

我遇到了一个奇怪的问题，它不是滚动到锚点，而是滚动到DIV，其ID与锚点的名称相同。

一旦我将DIV ID更改为不同的内容，行为就像预期的那样。

我似乎无法找到任何关于此的文档，并且想知道这是否是记录在案的行为。

有效的代码：

<a name="top">top</a>

<p id="bottomx" style="height: 1800px;">
<a href="#top">top</a>
<a href="#bottom">bottom</a>
<br>
</p>
<a name="bottom">bottom</a>

未按预期工作：

<a name="top">top</a>

<p id="bottom" style="height: 1800px;">
<a href="#top">top</a>
<a href="#bottom">bottom</a>
<br>
</p>
<a name="bottom">bottom</a>

在第二个例子中，它将滚动到名为“bottom”的P。同样，如果我在页面底部制作一个ID为“bottom”的DIV，并且我点击了page.html＃bottom，它会向下滚动到那个DIV。

看起来很混乱。知道为什么这样做？ Safari和FF中的行为相同。

Answer 1

id has precedence over name：

对于HTML文档（和HTML MIME类型），进行以下处理   必须遵循模型来确定所指示的部分   文件是。



解析URL，让fragid成为其中的组成部分   URL。



如果fragid是空字符串，则指示部分   文件是文件的顶部;在这里停止算法。



让解码的fragid是扩展任何序列的结果   fragid中的百分比编码八位字节是有效的UTF-8序列   UTF-8定义的Unicode字符。如果有任何百分比编码   该字符串中的八位字节不是有效的UTF-8序列（例如，它们   扩展到代理代码点），然后跳过这一步和下一步   之一。



如果没有跳过此步骤，并且DOM中有一个元素   有一个ID完全等于解码的fragid，然后是第一个这样的   树顺序中的元素是文档的指示部分;停   算法在这里。



如果DOM中有一个具有name属性的元素   value完全等于fragid（未解码的fragid），然后是   树的第一个这样的元素是指示的部分   文献;在这里停止算法。



如果fragid是字符串top的ASCII不区分大小写的匹配项，   然后文件的指定部分是文件的顶部;   在这里停止算法。



否则，文件中没有明确的部分。

Answer 2

HTML 4.01和XHTML 1.0规范要求name元素中的a属性不能与id元素的值相同，除非设置在同一属性上元素，文档有误。浏览器可以自由地应用它们自己的错误处理，这可能是非计划的。

HTML5草稿指定了复杂的错误处理规则，但它们也将name元素中的a属性声明为过时。

对同一文档中的两个元素使用相同的id值是不合逻辑的（并且正式禁止），因为id的目的和唯一目的是提供< em>元素的唯一标识符。 <a name=...>构造在HTML历史记录中早于id，并且在受限制的设置中始终与id扮演相同的角色。因此，以同样的方式对待它是很自然的。

命名为锚点（A），其中NAME与DIV ID冲突相同

2 个答案: