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

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

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)    }  }, [])