Anchor Links / Hash in URL is ignored on initial page load

Description

I am having a SPA built with gatsby. I am using <a href="/#sectionX">section x</a> links for navigation in the header. This is working just fine.
Unfortunately, reloading the page (having the anchor link in the URL) does not scroll to the expected section but stays unscrolled at the top of the page.

Steps to reproduce

Take any gatsby starter, add anchor link, reload page.

Expected result

Page should automatically scroll to desired section as provided in the URL on initial page load.

Actual result

Hash is ignored and page does not scroll

Environment

System: OS: Windows 10 10.0.17763 CPU: (8) x64 Intel® Core™ i7-4770 CPU @ 3.40GHz Binaries: Node: 12.13.0 - C:\Program Files\nodejs\node.EXE npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD Languages: Python: 2.7.17 Browsers: Edge: 44.17763.831.0

[danspratling]

Looks like gatsby takes control of the scroll position but you can use the gatsby-browser.js file to add a function to re-enable anchor links.

exports.onRouteUpdate = ({ location }) => scrollToAnchor(location)

/**
 *
 * @desc - a function to jump to the correct scroll position
 * @param {Object} location -
 * @param {Number} [mainNavHeight] - the height of any persistent nav -> document.querySelector(`nav`)
 */
function scrollToAnchor(location, mainNavHeight = 0) {
  // Check for location so build does not fail
  if (location && location.hash) {
    const item = document.querySelector(`${location.hash}`).offsetTop

    window.scrollTo({
      top: item - mainNavHeight,
      behavior: "smooth",
    })
  }

  return true
}

I’m not sure if the default browser behaviour for anchor links being disabled is intentional or not though. Would be worth getting some feedback from someone on the internal team.

[blainekasten]

Fixed in latest!