CODEWITHSUNDEEP
htmlhyperlinknavigationanchor
user1910388
user1910388

Reputation: 235

Navigate to an anchor on another page

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.

Upvotes: 16

Views: 131129

Answers (5)

Rahul Agrawal
Rahul Agrawal

Reputation: 19

use this target="_blank" attribute in anchor tag to open page in new tabxyz

Upvotes: 0

Mike Ursitti
Mike Ursitti

Reputation: 101

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.

Upvotes: 8

Rakesh Kumar
Rakesh Kumar

Reputation: 2865

I think you are facing this issue with a legacy browser (Internet Explorer 8 and below). Because I have tested it in Firefox, Chrome, and Internet Explorer 9. It's working fine. But it failed in legacy browsers.

For that, you have to use the anchor tag (a) 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...

Upvotes: 1

aaronang
aaronang

Reputation: 404

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>

Upvotes: 27

Teson
Teson

Reputation: 6736

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

Upvotes: 0

Related Questions