CODEWITHSUNDEEP
htmlanchor
Tom Maxwell
Tom Maxwell

Reputation: 9573

Anchors within the same page not working?

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.

Upvotes: 24

Views: 131127

Answers (10)

I3B
I3B

Reputation: 140

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

Upvotes: 2

curveball
curveball

Reputation: 4505

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.

Upvotes: 1

xerostomus
xerostomus

Reputation: 557

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

Upvotes: 2

DBR
DBR

Reputation: 165

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

Upvotes: 5

Brister Productions
Brister Productions

Reputation: 69

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>

Upvotes: 2

Alexander Goncharov
Alexander Goncharov

Reputation: 1662

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.

Upvotes: 24

Jignesh Kheni
Jignesh Kheni

Reputation: 1302

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>

Upvotes: 5

SkNiaZi786
SkNiaZi786

Reputation: 39

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.

Upvotes: 3

lloan
lloan

Reputation: 1403

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>

Upvotes: 6

DV77
DV77

Reputation: 129

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

Upvotes: 11

Related Questions