Gatsby: Page keeps scrolling to top - Gatsby + react-scrollable-anchor

[ankesh7]

Description

Gatsby with package - react-scrollable-anchor to navigate between sections on same page. I am facing a weird bug where page keeps scrolling to top if you try to scroll down the page past section 1. This use to work with previous version of Gatsby.

Steps to reproduce

Codesandbox to replicate this bug: Codesandbox Link
Scroll to mid page from top and let the scroll settle. You will see the jump to top of page every time.

Expected result

Should scroll to where users want to stop.

Actual result

Scroll is hijacked every time you try to scroll past one of the section that is wrapped in ScrollableAnchor.

Environment

  System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 72.0.3626.109
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.1.4 => 2.1.4 
    gatsby-plugin-emotion: ^2.0.5 => 2.0.5 
    gatsby-plugin-google-tagmanager: ^2.0.5 => 2.0.5 
    gatsby-plugin-manifest: ^2.0.2 => 2.0.2 
    gatsby-plugin-offline: ^2.0.5 => 2.0.5 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-sitemap: ^2.0.1 => 2.0.1 
    gatsby-source-contentful: ^2.0.29 => 2.0.29 

[wardpeet]

Thank you for logging this bug. It's indeed something we're handling incorrectly as we use try people to use https://www.gatsbyjs.org/docs/gatsby-link/. Does it work if you use gatsby-link?

[ankesh7]

@wardpeet The issue still persists after using gatsby-link since there it has to do something with onScroll listener or Router change event as react-scrollable-anchor adds # to URL if section is in view and Gatsby throws the viewport to scroll top since there is no ID found in the markup instead its a prop to component <ScrollableAnchor id={"section1"}> which is used to scroll animate to section. This is my assumption but I am going to take a look at implementation. Thanks for the help! :)

[ajsmth]

here's a workaround for the time being: https://codesandbox.io/s/njpky1p3l

// gatsby-browser.js
exports.shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition
}) => {

  if (location.hash) {
    return false;
  }

  return true;
};

[ankesh7]

Thanks @andyboythekid ! Confirmed this works like charm

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!