<a href="#..."> link not working

I am trying to create a set of links to specific sections in the page using the <a href="#..."> notation, but it doesn't seem to work. Clicking on the link seems to do nothing and right-click -> open in a new tab changes the url but does not move to a different section of the page. I am using Firefox 28.0. My links are as follows:

<div>
    <p>Contents</p>
    <ul>
        <li><a href="#map">Map</a></li>
        <li><a href="#timing">Timing</a></li>
        <li><a href="#timingdetails">Timing Details</a></li>
    </ul>
</div>

And they should be linking to:

<div id="map">[content]</div>
<div id="timing">[content]</div>
<div id="timingdetails">[content]</div>

Links to external webpages work fine. Placing the id="..." feature inside an <a> tag instead did not fix the problem. My webpage url is of the form http://127.0.0.1/foo/bar/baz/. This is within a Python Django project.

Any idea why this isn't working?

Every href needs a corresponding anchor, whose name or id attribute must match the href (without the # sign). E.g.,

<a href="#map">Map</a>

<a name="map">[content]</a>

An enclosing div is not necessary, if not used for other purposes.

Wow, thanks for pointing that out OP. Apparently Mozilla Firefox doesn't associate the id attribute with a location in the HTML Document for elements other than <a> but uses the name attribute instead, and Google Chrome does exactly the opposite. The most cross-browser proof solution would be to either:

1.Give your anchor divs both a name and an id to ensure max. browser compatibility, like:

<a href="#map">Go to Map</a> <!-- Link -->
----
<div id="map" name="map"></div> <!-- actual anchor -->

Demo: http://jsbin.com/feqeh/3/edit

2.Only use <a> tags with the name attribute as anchors.

This will allow the on-page links to work in all browsers.

what happened with me is that the href does not work second time and that because I should Remove hash value first,,

take look how I resolved it

<a href="#1" onclick="resetHref();">go to Content 1</a>

function resetHref() {
    location.hash = '';
}

<a href="#1">Content 1</a>    
<a href="#2">Content 2</a> 
<a href="#3">Content 3</a>
....
<a name="1"></a>Text here for content 1
<a name="2"></a>Text here for content 2
<a name="3"></a>Text here for content 3

When clicking on "Content 1" it will take directly to "Text here for Content 1. Guaranteed!

This might help

JS:

function goto($hashtag){
     document.location = "index.html#" + $hashtag;
}

HTML :

<li><a onclick="goto('aboutus')">ABOUT</a></li>

Comments
  • jsbin.com/peqase/1/edit?html,css,output — I can't reproduce the problem in Chrome 55 or Firefox 50.
  • Even HTML 4.01 already allowed elements with an id to be used as anchor targets, w3.org/TR/html401/struct/links.html#h-12.2.3
  • for me this is working fine on android, but not on iphone6 safai, can somebody help - stackoverflow.com/questions/35124950/…
  • for me this is working fine on android, but not on iphone6 safai, can somebody help - stackoverflow.com/questions/35124950/…
  • Very very bad example & practice to use numbers as any name/id/class values.
  • Also, I tested this example on Google Chrome and it only works when your targets are <a>'s. Btw thanks for voting down my completely valid & tested answer.
  • for me this is working fine on android, but not on iphone6 safai, can somebody help - stackoverflow.com/questions/35124950/…
  • You didn't say anything new from the original question. And it seems the question problem cannot be reproduced any more. So this is not a real answer.