Gatsby anchor scrolling incorrect

[zslabs]

Description

Scrolling to anchor links from within the generated tableOfContents links incorrectly positions itself on first click. A second-click resolves this. No changes in configuration; only package.json updates.

Steps to reproduce

Gatsby 2.0.31:

Gatsby 2.0.50:

Environment

  System:
    OS: macOS 10.14.1
    CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 2.7.1 - /usr/local/bin/fish
  Binaries:
    Node: 8.12.0 - /usr/local/bin/node
    Yarn: 1.12.1 - ~/.yarn/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Firefox: 63.0
    Safari: 12.0.1
  npmPackages:
    gatsby: 2.0.50 => 2.0.50
    gatsby-image: 2.0.20 => 2.0.20
    gatsby-plugin-canonical-urls: 2.0.7 => 2.0.7
    gatsby-plugin-catch-links: 2.0.8 => 2.0.8
    gatsby-plugin-feed: 2.0.9 => 2.0.9
    gatsby-plugin-google-tagmanager: 2.0.6 => 2.0.6
    gatsby-plugin-manifest: 2.0.9 => 2.0.9
    gatsby-plugin-netlify: 2.0.5 => 2.0.5
    gatsby-plugin-netlify-cms: 3.0.7 => 3.0.7
    gatsby-plugin-node-fields: 1.0.0 => 1.0.0
    gatsby-plugin-react-helmet: 3.0.2 => 3.0.2
    gatsby-plugin-sass: 2.0.4 => 2.0.4
    gatsby-plugin-sharp: 2.0.12 => 2.0.12
    gatsby-plugin-sitemap: 2.0.2 => 2.0.2
    gatsby-plugin-twitter: 2.0.7 => 2.0.7
    gatsby-remark-autolink-headers: 2.0.11 => 2.0.11
    gatsby-remark-copy-linked-files: 2.0.6 => 2.0.6
    gatsby-remark-custom-blocks: 2.0.1 => 2.0.1
    gatsby-remark-embed-video: 1.4.0 => 1.4.0
    gatsby-remark-images: 2.0.6 => 2.0.6
    gatsby-remark-prismjs: 3.0.3 => 3.0.3
    gatsby-remark-relative-images-v2: 0.1.5 => 0.1.5
    gatsby-remark-relative-links: 0.0.2 => 0.0.2
    gatsby-remark-responsive-iframe: 2.0.6 => 2.0.6
    gatsby-source-filesystem: 2.0.8 => 2.0.8
    gatsby-transformer-remark: 2.1.12 => 2.1.12
    gatsby-transformer-sharp: 2.1.8 => 2.1.8
    gatsby-transformer-yaml: 2.1.5 => 2.1.5
  npmGlobalPackages:
    gatsby-cli: 2.4.4

[pieh]

What are you using for smooth scrolling effect? Would be great if we would have reproduction for it

[zslabs]

Hey @pieh I'm just using scroll-behavior: smooth for that.

Private repo unfortunately - was hoping the .gif and gatsby info would help. Do you happen to know if any of the logic around anchor scrolling or calculation has changed recently?

[Resumane]

Alternatively you could use this: https://www.npmjs.com/package/react-scrollchor It works for me with the last Gatsby version.

[zslabs]

Alternatively you could use this: https://www.npmjs.com/package/react-scrollchor It works for me with the last Gatsby version.

Appreciate the reply; but the tableOfContents MarkdownRemark property is automatically generated HTML; and removing that CSS property doesn't impact the position; so it's not something a 3rd party module is going to resolve since I don't have access to those click events.

[wardpeet]

@zslabs mind creating a reproduction? This way it's easier to prioritize this one

[zslabs]

@zslabs mind creating a reproduction? This way it's easier to prioritize this one

You can see it live by visiting https://www.gremlin.com/community/tutorials/chaos-engineering-monitoring-metrics-guide/ and interacting with the sidebar links; click it once, then when the element is scrolled-down to it; click that same item again, and it moves the position.

[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! 💪💜

[nicobao]

Hi guys!

I faced similar issue. It turned out that using "scroll-behavior: smooth" was the origin of the problem. For some reasons, it literally blocked any anchor link to work at all.

Haven't figured out why quite yet.

[zslabs]

@NicoGim Appreciate the insight there!

[nicobao]

Personally I don't really need using smooth scrolling, so I'll stop here. Too busy to chase down on that bug. Also, I am not a javascript/gatsby/react guru. Have you tried using react-scrollchor as @Resumane suggested? As weird as it sounds, it might actually solve your problem.

[zslabs]

Personally I don't really need using smooth scrolling, so I'll stop here. Too busy to chase down on that bug. Also, I am not a javascript/gatsby/react guru. Have you tried using react-scrollchor as @Resumane suggested? As weird as it sounds, it might actually solve your problem.

For certain parts of the site that are auto-generated (like the table of contents) it wouldn't be worth the effort to attempt to integrate, but I decided to just remove scroll-behavior: smooth as you mentioned as it's just not worth the headache. Thanks again!