CODEWITHSUNDEEP
htmlgoogle-chromeanchor
Alb Dum
Alb Dum

Reputation: 1131

HTML anchor in URL is not working in Chrome

I've been pulling my hair on a tiny thing: https://numa.co/about/#corporate-innovation

This URL doesn't go to the right anchor, only in Chrome and I can't see why... It works in our development environment. The only difference I can see is that we're behind Cloudflare in production and it's HTTPS. I can't see how this would make a difference though.

Upvotes: 3

Views: 8396

Answers (3)

Zbigniew Ledwoń
Zbigniew Ledwoń

Reputation: 682

This is a workaround to your problem and works fine in all major browsers.

Put this JavaScript code in head section of the page where your anchor is.

<script>
window.onload = function() {
    if(window.location.hash) {
       elmnt = document.getElementById(window.location.hash.substring(1));
           elmnt.scrollIntoView(true);
    }
}
</script>

Upvotes: 2

Jamie Buttons Coulter
Jamie Buttons Coulter

Reputation: 513

It looks like the a name is empty to me. This needs to be the same as the URL fragment. Take a look at this view of my inspector: https://i.sstatic.net/Z9JD3.jpg

You might need to take a look at the original HTML to see if there's an issue with syntax. The inspector on the image is Chrome on Mac.

I would try to change the HTML to be more like this:

<a name="corporate-innovation"></a>
<h3 style="color:#E50064">Corporate Innovation</h3>
<span style="color:#E50064"><p>NUMA helps corporates innovate in a different way by collaborating with an ecosystem of entrepreneurs and experts. We provide new methodology training, accelerated intrapreneurship projects, and create open innovation programs for large companies and public institutions.</p>
</span>

Upvotes: 0

Jacob
Jacob

Reputation: 2163

You have two elements with the same id="corporate-innovation". The browser is going to the first of those elements. id's must be unique to one element. Check the spec.

Upvotes: 1

Related Questions