html - Anchor <a> tags not working in chrome when using #

Question

Here is the code I am using on my page,

<li><a href="/explore/#Sound">Sound</a></li>

(in a menu which appears on all pages)

<a id="Sound"><a>

(on the page where i want to link to)

I have tried adding content to the tags with an id. But only in chrome the browser will not scroll down to the tag. These anchors work in IE&FF Any ideas?

Answer 1

Turns out this was a bug in certain versions of chrome, posting workaround for anyone who needs it! :)

$(document).ready(function () {
        var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
        if (window.location.hash && isChrome) {
            setTimeout(function () {
                var hash = window.location.hash;
                window.location.hash = "";
                window.location.hash = hash;
            }, 300);
        }
    });