锚标签中的哈希值

Question

如何加载页面并使其在加载页面的某个位置打开？

例如,假设我有page1.html,它有3个链接

<a href="page2.html#1">1</a>
<a href="page2.html#2">2</a>
<a href="page2.html#3">3</a>

在page2.html,我也有页面上的那些链接,即

<a href="page3.html#1">1</a>
<a href="page3.html#2">2</a>
<a href="page3.html#3">3</a>

但是当我点击#2或#3链接的page1.html,他们总是在页面的顶部开放,即使#2和#3在关闭屏幕page2.html需要被向下滚动到待观察.

不确定我做错了什么.

Answer 1

您需要将命名锚点放在上面page2.html,如下所示:

<a name="1"></a>
…
<a name="2"></a>
…
<a name="3"></a>

- 这是在HTML5之前.如今,你使用id而不是name.

Answer 2

您需要为应该"跳转"到的元素添加ID.

例如,如果你有

<div id="part1">
  <p>Blah blah blah</p>
</div>

<div id="part2">
  <p>Blah blah blah</p>
</div>

<div id="part3">
  <p>Blah blah blah</p>
</div>

他们都在 page.html

然后,您可以链接到page.html#part1,page.html#part2等等等等,它会跳转到页面的正确部分

更新:

您也可以使用name属性,但我更喜欢使用id.这是因为任何东西都可以有id,但不一定是名字.例如,我认为name不是HTML 5中'a'标记的有效属性.另外,如果你有一个id ="part1"的元素和另一个name ="part1"的不同元素,那个id为id的那个将取得优势.为了避免混淆,我只是坚持使用一种方法.还有更多的讨论对这个有点这里

Answer 3

在目标页面上的锚标记中使用name属性或id属性将实现所需的结果.

<a name="someLocation" id="someLocation">SomeText</a>

作为XHTML 1.1约定,锚标记的name属性已被id属性替换.在XHTML 1.0的上下文中,name属性被认为是不推荐使用的.

有关锚标记更改的相关讨论,请参阅此答案.

总结:出于兼容性原因,许多人建议在同一元素中同时使用id属性和name属性.在这种情况下,锚标签.

W3C标准建议(关于所有适用的要素):

id和name属性共享相同的名称空间.这意味着它们不能在同一文档中定义具有相同名称的锚点.允许使用这两个属性为以下元素指定元素的唯一标识符:A,APPLET,FORM,FRAME,IFRAME,IMG和MAP.当两个属性用于单个元素时,它们的值必须相同.

对任何重复道歉,我缺乏评论最佳答案的声誉.

Answer 4

由于仍然可以找到此帖子，因此我想添加一个更新：

<a href="#jumppoint">goto '#jumppoint'</a>

确实跳至：

<div id="jumppoint">  <!-- name="" does not work here on modern browsers -->
   <h2>here</h2>
</div>

和：

<a name="jumppoint" />
<h2>here</h2>