Navigate to anchor on another page

Question

I simply want to navigate from one page to a specific point on another

I have a home page with four sections.

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

<section id="section2">

</section>

<section>
   <a name="section3"></a>
</section>

<section id="section4">

</section>

Section 2 and 4 feature on every page, so my nav looks like:

<nav>
      <ul>
        <li><a href="index.html#section1">ABOUT</a></li>
        <li><a href="#section2">APARTMENTS</a></li>
        <li><a href="index.html#section3">LANDLORDS</a></li>
        <li><a href="#section4">CONTACT</a></li>
      </ul>
</nav>

The links aren't navigating to the index page or the desired section of the index page.

Thanks in advance.

Now I have

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

    <section id="section2">

    </section>

    <section>
       <a name="section3"></a>
    </section>

    <section id="section4">

    </section>

and my navigation:

<nav>
      <ul>
        <li><a href="#section1">ABOUT</a></li>
        <li><a href="#section2">APARTMENTS</a></li>
        <li><a href="#section3">LANDLORDS</a></li>
        <li><a href="#section4">CONTACT</a></li>
      </ul>
</nav>

It is still not working

Answer 1

Are you sure that you have placed the files in same directory? I've tested the code that you have provided and it's working. However you could try this out (a different way of giving sections an id):

<section>
    <a id="section1">
        CONTENT
    </a>
</section>

If you have done this, just use the same way of linking:

<a href="different-page.html#section1">Section One</a>

Answer 2

You need an a-name tag, please see http://www.w3schools.com/tags/att_a_name.asp

Answer 3

I think you are facing this issue with Legacy Browser(IE8 and below). Because I have tested it in firefox, chorm and IE9. It's working fine. But failed in legacy browser.

For that you have to use anchor tag instead of div id.

Example:

<a name="section1"></a>
<section>section content goes here </section>

<a name="section2"></a>
<section>section content goes here </section>

<a name="section3"></a>
<section>section content goes here </section>

<a name="section4"></a>
<section>section content goes here </section>

Now you can use any class name you want for your section elements...

Answer 4

Check your javascript code for line that says "event.preventDefault();"

I found this in a w3school bootstrap template that included this command as part of a block that makes a nice scroll to the hashtag. Once I commented it out, the links worked fine.