Anchor tags not working in chrome when using #

Question

Here is the code I am using on my page,

Sound

(in a menu which appears on

Answer 1

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>

Answer 2

Here is my version of @Jake_ answer for Chrome / angular not scrolling to a correct anchor on initial page load up using ui-router (the original answer would throw my code into 'Transition superseeded' exceptions):

angular.module('myapp').run(function($transitions, $state, $document, $timeout) {
  var finishHook = $transitions.onSuccess({}, function() { // Wait for the complete routing path to settle
    $document.ready(function() { // On DOM ready - check whether we have an anchor and Chrome
      var hash;
      var params;
      var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
      finishHook(); // Deregister the hook; the problem happens only on initial load
      if ('#' in $state.params && isChrome) {
        hash = $state.params['#']; // Save the anchor
        params = _.omit($state.params, ['id', '#']);
        $timeout(function() {
          // Transition to the no-anchor state
          $state.go('.', params, { reload: false, notify: false, location: 'replace' });
          $timeout(function() {
            // Transition back to anchor again
            $state.go('.', _.assign($state.params, { '#': hash }), { reload: false, notify: false, location: 'replace' });
          }, 0);
        }, 0);
      }
    });
  }, {invokeLimit: 1});
});

Answer 3

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 brwoser is just working too fast to load the skeleton of the page so can't find your anchor when it load 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)
    }
  }, [])