Anchor tags not working in Google Chrome (when linking to separate webpage)

Question

I'm a bit new to html, javscript, and css so I apologize ahead of time for any obvious ignorance. I'm using an anchor tag so that when a user clicks on this link it will jump them to a specific div on another webpage:

index.html :

<div class="notice">
  <h2>If you have any trouble while you're here, please <br>
  <a href="/contact.html#contactForm"> get in touch with me</a> and let me 
        know!</h2>
</div>

contact.html :

<div class=contact id="contactForm">

However, when you click on the link, Chrome ignores the # and just loads /contact.html. But then, when you navigate back to /index.html and then click on the link again - then Chrome decides to pay attention to the # and loads /contact.html#contactForm.

I've researched javascript threads that use various scroll() functions - but they all seem to work when linking to a place on the same webpage. I'm having trouble finding a workaround for when the anchor is on a different page.

UPDATE I've also noticed that it seems to be the fault of random Chrome plugins - as with all plugins disabled, the anchor tag works just fine. However, I can't exactly expect all visitors to the website to have all their plugins disabled.

Answer 1

You actually need to add an anchor element with a name attribute containing the hash string, this element may be empty. Use this:

<a name="contactForm"></a>
<div class=contact id="contactForm">
...your code