2

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?

Pevara
  • 14,242
  • 1
  • 34
  • 47
MisterP
  • 447
  • 1
  • 3
  • 17

2 Answers2

7

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">...
Shawn Jacobson
  • 1,352
  • 8
  • 13
6

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.

Sumner Evans
  • 8,951
  • 5
  • 30
  • 47