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:[email protected]" 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.

Answer 1

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:

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

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

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>

Answer 6

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

Answer 7

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>

Answer 8

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

Answer 9

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.