How can I set an anchor link to a specific section in a page?

2018-07-01 22:07:40

I have a page, let's say page2, filled with several <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>

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

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

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

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

will take you to the section1 section of page2 .

Further reading:

MDN href attribute documentation.

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

<section id="section1">...

链接地址: http://www.djcxy.com/p/88996.html

上一篇: 如何实现跳转到<a name = ...的帖子形式

下一篇: 我如何设置锚链接到页面中的特定部分？