如何将锚链接设置到页面中的特定部分？答案

【问题标题】：How can I set an anchor link to a specific section in a page?如何将锚链接设置到页面中的特定部分？
【发布时间】：2015-05-10 21:02:45
【问题描述】：

我有一个页面，比如说page2，里面填了几个<section>：

<section class="box special" id="section1">
 //
</section>
<section class="box special" id="section2">
 //
</section>
<section class="box special" id="section3">
 //
</section>
<section class="box special" id="section4" style="background:#3399ff;">
 //
</section>

然后我有另一个页面page1，我想在其中放置一个锚链接

    <ul class="actions">
        <li><a href="page2.php" class="button">Link to page2</a></li> 
   </ul>

我想要实现的是设置此锚链接，以便在 page2 中访问特定的<section>，而不仅仅是在 page2 的顶部。那可能吗？如果有，怎么做？

【问题讨论】：

你试过href="page2.php#section2吗？
下面的两个例子是后面的。
不，实际上我没有意识到这一点。我会尽快尝试，谢谢。

标签： html

【解决方案1】：

使用锚标记

<a name="section1"><section ...></section></a>

然后在链接中添加具体的锚点

<a href="page2.php#section1">Link</a>

正如 cmets 所建议的，如果您使用的是 HTML5（而且看起来确实如此），您可以消除锚标记并只使用部分元素的 id

<section id="section1">...

【讨论】：

注意 - 在 html5 中，<a name=""> 不再需要，因为它可以使用 <section> stackoverflow.com/questions/484719/html-anchors-with-name-or-id 中的 id 属性来实现它
使用 <a name=""> 很好，例如，如果您的 ID 很长，但想要链接的短名称。

【解决方案2】：

使用#{id}，其中{id} 是您要链接到的部分的ID 值。例如

<a href="page2.php#section1" class="button">Link to page2</a>

将带您前往section1 section 的page2。

进一步阅读：

MDN href attribute documentation.

【讨论】：