命名为锚点(A),其中NAME与DIV ID冲突相同

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优先于name:

对于HTML文档(和HTML MIME类型),必须遵循以下处理模型以确定文档的指示部分.

1. 解析URL,并将fragid作为URL的组件.

2. 如果fragid是空字符串,则文档的指示部分是文档的顶部; 在这里停止算法.

3. 令解码的fragid是将有效UTF-8序列的fragid中任何百分比编码八位字节序列扩展为UTF-8定义的Unicode字符的结果.如果该字符串中任何百分比编码的八位字节不是有效的UTF-8序列(例如,它们扩展为代理代码点),则跳过此步骤和下一步骤.

4. 如果没有跳过这一步并且DOM中有一个元素的ID完全等于解码的fragid,则树顺序中的第一个这样的元素是文档的指示部分; 在这里停止算法.

5. 如果DOM中有一个元素具有name属性,其值完全等于fragid(未解码的fragid),则树顺序中的第一个这样的元素是文档的指示部分; 在这里停止算法.

6. 如果fragid是字符串top的ASCII不区分大小写匹配,则文档的指示部分是文档的顶部; 在这里停止算法.

7. 否则,文档中没有指明的部分.