5

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

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

一旦我将 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 中的行为相同。

4

2 回答 2

7

id优先于name：

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

  1. 解析 URL，让 fragid 成为 URL 的组成部分。

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

  3. 假设解码的脆弱是将有效的 UTF-8 序列的任何百分比编码八位字节序列扩展为 UTF-8 定义的 Unicode 字符的结果。如果该字符串中的任何百分比编码的八位字节不是有效的 UTF-8 序列（例如，它们扩展为代理代码点），则跳过这一步和下一步。

  4. 如果没有跳过这一步，并且 DOM 中有一个元素的 ID 与解码后的 fragid 完全相同，那么树顺序中的第一个这样的元素就是文档的指示部分；在这里停止算法。

  5. 如果 DOM 中有一个 a 元素的 name 属性的值正好等于 fragid（未解码的 fragid），那么树顺序中的第一个这样的元素就是文档的指示部分；在这里停止算法。

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

  7. 否则，文档中没有指定的部分。

于 2012-05-06T23:08:59.413 回答
1

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

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

对同一文档中的两个元素使用相同的值是不合逻辑的（并且正式禁止）id，因为其目的和唯一目的id是为元素提供唯一标识符。该<a name=...>构造早于 HTML 的历史，并且总是意味着在受限环境中id扮演与 相同的角色。id因此，它受到同样的对待是很自然的。

于 2012-05-07T04:41:55.950 回答