gatsby: Anchor links don't work

Description

I use gatsby-transformer-remark to parse markdown files and get table of contents. If I hit an item in table of contents (anchor link), the browser doesn’t scroll to the section.

Steps to reproduce

I created a basic demo project here. If you open for example http://localhost:8000/docs/tauchain-agoras-faqs and scroll to the bottom, you can see table of content there.

I created a recording, where I click on items in table of contents and nothing happens.

Expected result

If item in table of contents is clicked, browser should scroll to that section.

Actual result

The browser doesn’t scroll to the section, it just changes hash in browser url address.

Environment

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.1.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 76.0.1
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.23.12 => 2.23.12
    gatsby-image: ^2.4.9 => 2.4.9
    gatsby-plugin-manifest: ^2.4.14 => 2.4.14
    gatsby-plugin-offline: ^3.2.13 => 3.2.13
    gatsby-plugin-react-helmet: ^3.3.6 => 3.3.6
    gatsby-plugin-sharp: ^2.6.14 => 2.6.14
    gatsby-remark-autolink-headers: ^2.3.10 => 2.3.10
    gatsby-remark-embed-video: ^3.0.10 => 3.0.10
    gatsby-source-filesystem: ^2.3.14 => 2.3.14
    gatsby-source-git: ^1.1.0 => 1.1.0
    gatsby-transformer-remark: ^2.8.23 => 2.8.23
    gatsby-transformer-sharp: ^2.5.7 => 2.5.7
  npmGlobalPackages:
    gatsby-cli: 2.12.40
    gatsby: 2.8.8

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 28 (16 by maintainers)

Commits related to this issue

fix: :bug: force downgrade culprit dependency https://github.com/gatsbyjs/gatsby/issues/25554 — committed to filipowm/BooGi by filipowm 4 years ago

Most upvoted comments

I don’t think it should be closed. This workaround with yarn resolutions should be added to Readme or documentation.

AndrejGajdos on Jul 14, 2020

oh dude, what a happy misunderstanding! in my case <Link > from gatsby does not work, but using the <a> HTML tag works, the wear thing here is that I was using <Link> for a time but after updated gatsby version and all my dependencies I face this issue, Now I see in the gatsby documentation this recommendation and everything makes sense.

rootlinux2 on Oct 11, 2020

I raised a new issue which I think is this same issue but I’m not sure, anyway it’s #25778 if anyone’s interested.

ediblecode on Jul 15, 2020

You can also use #hash-links when coming from another page. For example <Link to="/about#some-section" />

josephmarkus on Oct 13, 2020

The idea is to use Gatsby Link for any links within your application (e.g. a link on homepage to about page). For everything else, you should use anchor tag (<a>).

This is what I have in my package.json:

"resolutions": {
  "**/gatsby-react-router-scroll": "2.2.3",
},
"dependencies": {
  "gatsby": "~2.24.67"
}

josephmarkus on Oct 12, 2020

Using Gatsby Link takes advantage of faster page navigation. Using anchor tags will cause a full page refresh.

josephmarkus on Oct 12, 2020

@brootle you are right, my problem was gatsby-link, I just replaced for an anchor tag and the issue was solved, Thanks, I did not see the documentation recommendations

rootlinux2 on Oct 10, 2020

have same problem, I am not sure when it started, I didn’t have this problem before, so my guess is that it happened after some package update, as for gatsby version, I now have “gatsby”: “^2.24.7”… I just tried to run npm update and updated all packages to latest and guess what, the problem still exists + I got other issues that broke my app logic in some parts 😃 so had to downgrade and will just use my own workaround to handle anchor links clicks in table of contents

brootle on Sep 15, 2020

I’m going to close this issue as the original reporter’s issue has been solved! Feel free to keep discussing here or opening a new issue.

For those still experiencing the issue, it seems like you might have some dependency issues. Try deleting your node_modules, clearing cache and re-installing fresh!

blainekasten on Jul 13, 2020

@josephmarkus sorry, it was 2.24.2

AndrejGajdos on Jul 10, 2020