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

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

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>

If you somehow ended up here like me when finding out the anchor link to a SPA site doesn't work from an external site. Yep, the browser is just working too fast to load the skeleton of the page. And it couldn't find your anchor when it loads the page.

To work around this, just add in the lifecycle of your SPA (useEffect in React and mounted in Vue) some lines to check the url hash and do the scrolling yourself.

example using React

  useEffect(()=> {
    if(document.location.hash === '#some-anchor') {
      setTimeout(()=> {
          document
            .querySelector("#some-anchor")
            .scrollIntoView({ behavior: "smooth", block: "start" })
      }, 300)
    }
  }, [])

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