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

I have a page, let's say page2, filled with several <section>:

我有一个页面,比如说第2页,里面装满了几个

<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>

Then I have another page, page1, in which I wanna put an anchor link

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

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

What I'm trying to achieve is to set up this anchors links in order to get to a specific <section> in page2, not just at the top of page2. Is that possible? And, if so, how?

我想要实现的是设置这个锚点链接,以便到达第2页的特定

,而不仅仅是在page2的顶部。那可能吗?如果是这样,怎么样?

2 个解决方案

#1

Use #{id} where {id} is the id value of the section you want to link to. For example

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

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

will take you to the section1 section of page2.

将带您进入第2页的第1部分。

Further reading:

MDN href attribute documentation.

MDN href属性文档。

#2

Use an anchor tag

使用锚标记

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

Then in the link add the specific anchor

然后在链接中添加特定锚点

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

And as the comments have suggested, if you're using HTML5 (and it appears you are), you can eliminate the anchor tag and just use the id of the section element

正如评论所暗示的那样,如果您使用的是HTML5(并且看起来像是),您可以删除锚标记并只使用section元素的id

<section id="section1">...

#1