Anchors within the same page not working?

Question

I'm trying to link to elements within the HTML of my page, but it's not working and I'm unsure as to why.

Here's the initial link:

<ul>
    <a href="#"><li>About Me</li></a>
    <a href="#"><li>Past</li></a>
    <a href="#Work"><li>Work</li></a>
    <a href="http://blog.tommaxwell.me"><li>Blog</li></a>
</ul>

I'd like all the li's in this list to be links to somewhere else on the page (except the last one).

And at the top of this code is where I'm trying to link to:

    <div id="Work">
    <a name="Work"><h2 id="work-title">Work</h2></a>
        <ul>
            <li>
                <h3>BrainDB</h3>
                <p>BrainDB is a new startup I'm working on with my co-founder, <a href="http://www.twitter.com/masonlong" id="mason">@masonlong</a>. I write everything from Rails to AngularJS and CSS. BrainDB's goal is to augment the mind with useful and inviting services.</p>
            </li>

            <li>
                <h3 id>SummarizeIt</h3>
                <p><a href="http://54.225.211.118/" id="summarize">SummarizeIt</a> is a JavaScript project that I built during a weekend. It utilizes an API for summarizing content, like blog posts, into bit-sized chunks. </p>
            </li>

            <li>
                <h3>Freelance</h3>
                <p>I freelance from time to time. I work with personal clients, as well as through <a href="https://www.elance.com/s/tommaxwell/?utm_medium=social&utm_source=twitter&utm_campaign=free&SiteTarget=share_profile&utm_term=3712117" id="elance">Elance</a>. I'm <a href="mailto:tommaxwell95@gmail.com" id="email">available</a>.</p>
            </li>
        </ul>
    </div>

Do the areas I link to have to use the section tag? I have multiple of these divs with ul's in them.

Can't see anything wrong with it apart from
, are you running any frameworks that could be highjacking your links? — JanR, Jun 27 '13 at 04:25
I'll have to check and see if anything I'm using might be causing it. — Tom Maxwell, Jun 27 '13 at 04:28
On which browser are you testing this code? Seems to work on Firefox 40 — Barun, Sep 13 '15 at 11:11

Alexander Goncharov · Answer 1 · 2017-10-10T19:27:07.177

23

It's important. Anchors will not work on all pages, have tag <base> in head (but root page), if href of anchor is page-relative (begins with #).

For example you are on the page:

https://example.com/the/page/

Base tag on page like this:

<base href="https://example.com">

In code of this page there is an anchor:

<a href="#anc">anchor</a>

With base-tag it'll follow to https://example.com/#anc , not what was expected.

To resolve this issue, you can do one of this:

Use domain-relative anchor.
Overload anchor click with javascript and swap url to domain-relative.
Delete base tag - it is often unused.

edited Oct 10 '17 at 19:27

answered Oct 10 '17 at 19:16

Alexander Goncharov

1,572
17
20

3

#3 is bad advice. maybe YOU seldom use them in your projects, but they are hardly uncommon ;) – Mavelo Dec 10 '17 at 19:50
@Robert M. it is more order, when no base tag in layouts. But, yes if you delete base-tag - you can break something: fast to repair, but not fact you find it. – Alexander Goncharov Dec 10 '17 at 22:38
Still bad advice for novice users who may not realize the underlying implications of removing it ;) – Mavelo Dec 11 '17 at 01:36
FWIW, I was having this issue, and this was the solution. My scenario may be unique in that I'm serving static files from S3 that were generated via Mustashe. The base template I used was a rendered Angular page and I had the Base tag still in place. Removing it allowed my internal anchors to work perfectly. – Levi Rosol Dec 19 '17 at 02:43
Using base is anything but common. Let's say that we have the next url :somedomain/article.php?id=4 it could be converted to somedomain/article/4 . However the browser considers every relative resource (image) to point to the folder article/4 – magallanes Jun 01 '18 at 14:07

score 9 · Answer 2 · answered Jun 27 '13 at 04:28

9

Hi you have to use 'a id' to be called by 'a href'

Here is the example:

<a href="#Works">My Works</a>

it will call:

<a id="Works">Works</a>

Demo

answered Jun 27 '13 at 04:28

DV77

109
2

score 5 · Answer 3 · answered Jun 27 '13 at 04:29

5

The anchor needs to have the ID or name of Work but you are using it twice.

HTML Tags - links

<a href="#Anchorname">linked text</a>

(Target point) 
<a name="Anchorname">a named anchor</a>

answered Jun 27 '13 at 04:29

lloan

1,383
8
23

score 4 · Answer 4 · edited May 19 '16 at 11:36

4

use anchor tag inside li tag like this.

<ul>
    <li><a href="#id">about</a></li>
    <li><a href="#work">work</a></li>
    <li><a href="#id">blog</a></li>
</ul>

something like this and your link id as below

<div id="work">
</div>

edited May 19 '16 at 11:36

Sender

6,660
12
47
66

answered Jun 27 '13 at 04:47

jignesh kheni

1,282
1
9
22

score 3 · Answer 5 · edited Apr 01 '15 at 20:24

3

Try This.

<a href="#About"></a>

Now If You Want To Link it In the Bottom Somewhere.

<a name="About">(Make Sure There Is Not Text here)</a>About Section.

edited Apr 01 '15 at 20:24

usumoio

3,500
6
31
57

answered Jun 27 '13 at 04:53

SkNiaZi786

39
4

score 3 · Answer 6 · answered Jul 29 '20 at 14:49

I had this issue today. Additional I wanted to smooth scroll to the anchor and that what saved my day. The "issue" can be pointed out to the tag like @Alexander Goncharov pointed out in his answer.

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

I found this solution here

score 2 · Answer 7 · answered May 22 '19 at 20:16

I was having this problem as well (same page navigation using links) and the solution was very easy (though frustrating to figure out). I hope this helps - also I checked IE, Firefox, and Chrome and it worked across the board (as of 05-22-2019).

Your link should looks like this:

<a href="pagename.html##anchorname">Word as link you want people to click</a>

and your anchor should look like this:

<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>

score 2 · Answer 8 · answered Mar 06 '21 at 09:05

In my case, I found this workaround:

Instead of

<base target=_blank>

I put there:

<base href=. target=_blank>

After this modification, the external link to the file jumped to the anchor properly:

http://domainov.us/directorovich/filovskaja.html#anchorovna

curveball · Answer 9 · 2022-05-31T10:50:33.643

Just my 2 cents for people having the same issue. Check whether you have another element with desired id on the page. In my case I have already had svg-icon with id="contacts", totally out of my attention, inserted right after <body> tag as part of svg-sprite. So, my anchor navigation (<a href="#contacts"></a>) down the page to another (the second, in fact) element (section header) with the same id seemed not working.

score 1 · Answer 10 · answered Sep 22 '22 at 16:31

Anchors won't work if the page is still loading on some browsers (tested on chrome, edge and brave, seems like a chromium thing)

So if your page is infinitely loading anchors won't work on those browsers.
Check your JavaScript for anything broken, in my case it was an onload event

Anchors within the same page not working?

, are you running any frameworks that could be highjacking your links?

10 Answers10