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

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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 = '';
}

Answer 4

Just resurrecting this post because I had a similar problem and the reason was something else.

In my case it was because we had:

<base href="http://mywebsite.com/">

defined on the .

Obviously, don't just remove it, because you need it if you are using relative paths.

Read more here: https://www.w3schools.com/tags/tag_base.asp

Answer 5

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

Answer 6

This might help

JS:

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

HTML :

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

Answer 7

Today being March of 2022, I had a specific occurrence of this problem that illustrates how the whole web environment is an "issue" today.

Same requirement: links that go to a section of the page. It worked on my desktop's Chrome and Firefox, but not on my client's and neither on my Android's Chrome.

After reading multiple threads several times for a few hours, I found out that, in order for this behavior to be the most consistent across browsers and browser versions, you have to implement both things:

• a container with an id, and

• an anchor with a name property,

The most important part is that the anchor tag with a name, must have content inside of it.

So, you have your links

<a href="#page-section">Go to section</a>
<!-- more links -->

And you have the sections you want your links to go to

<div id="page-section">
    <a name="page-section" class="collapse"> placeholder-content (important) </a>
    <!-- your section content -->
</div>

Since you MUST have content inside the anchor with the name, you can then hide it in several ways. My approach was to just set it's height to 0. In order for the height to be effective, the anchor tag's display property should be set to block or inline-block for example.

.collapse {
    height: 0px;
    overflow: hidden;
    display: block;
}

Finally it all worked, and I have to thank the many developers who struggle with this sort of thing (which should be much easier to do, but, the web...), and all the people who answer questions like this and share their knowledge.

Answer 8

Here is something that I finally got to work in IE, Chrome and Firefox.

Around any text create an anchor tag like this:

<a class="anchor" id="X" name="X">text</a>

Set "X" to whatever you want.

You must enclose something in the anchor tags such as text or an image. It will NOT work without these.

For the link, use this:

<a href="#X">text</a>

As for getting rid of the CSS for links using our anchor tag use something like this:

a.anchor {
color:#000;
text-decoration:none;
}

This seems to work well.