Navigate to an 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.

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

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

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