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

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?

Solution 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);
        }
    });

Solution 2:

The workaround posted didn't work for me, however after days of searching this finally worked like a charm so I figured it was worth sharing:

 $(function() {
       $('a[href*="#"]:not([href="#"])').click(function() {
         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
           var target = $(this.hash);
           target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html, body').animate({
               scrollTop: target.offset().top
             }, 1000);
             return false;
           }
         }
       });
     });