Gatsby: Anchor Links, part 2

[ivanoats]

Is there a plan to support or document how to make anchor links work?

I know https://github.com/gatsbyjs/gatsby/issues/302 is closed for now, but it's not clear how to work-around.

I have a fork of gatsby-starter-default that reproduces the error here: https://github.com/ivanoats/gatsby-starter-default/blob/master/pages/html.html

[ivanoats]

D'oh - https://github.com/adjohnson916/anchorate#gatsby - I will try that.

[ivanoats]

Works great! Should we add it to starters, README, or both?

[KyleAMathews]

Don't think they need to be in starters (other than perhaps the documentation one) but yeah, this would be great to add to the README.

[ivanoats]

1) Cool, I will make a PR for the README.

2) Starters: OK, hear me out on this. Anchors are such a basic part of HTML that we need to explain if something is broken with HTML out of the box. Maybe I've been using HTML for too long and that's why I feel that way, but that's what I think.

[KyleAMathews]

hmmm... that is a good point actually. I added react-router-scroll for the
same reason. We do have to emulate features that the browser normally
provides by default. Changed positions — perhaps even make this turned on
by default in Gatsby?

On Wed, Aug 10, 2016 at 9:41 PM Ivan Storck [email protected]
wrote:

1) Cool, I will make a PR for the README.

2) Starters: OK, hear me out on this. Anchors are such a basic part of
HTML that we need to explain if something is broken with HTML out of the
box. Maybe I've been using HTML for too long and that's why I feel that
way, but that's what I think.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/386#issuecomment-239072931,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh_nmVkdTdRMrPd3TEyifrgOvE36Dks5qeqgGgaJpZM4Jho9v
.

[rojobuffalo]

Maybe taking this one step further, it might be cool to be able to opt-in to have anchors auto-generated for all h1 and h2 tags based on the text for that heading.

[f0rr0]

@rojobuffalo you can use something like markdown-it-anchor for that

[f0rr0]

@ivanoats are you sure it is working 100% of the time? i tested it in my project and the result is almost the same as without using anchorate.

[f0rr0]

The correct way to fix this would involve stopping a re render in the first place. anchorate gets called only after the route is changed

[ivanoats]

Pretty sure. I haven't had any issues from manual testers. I would be interested in an automated test.

Sent from my iPhone

On Sep 24, 2016, at 3:13 AM, Siddharth Jain [email protected] wrote:

@ivanoats are you sure it is working 100% of the time? i tested it in my project and the result is almost the same as without using anchorate.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[f0rr0]

Confirmed this is a react-router-scroll issue.
https://github.com/gatsbyjs/gatsby/issues/462#issuecomment-249452553
https://github.com/taion/react-router-scroll/issues/10

[f0rr0]

As far as anchorate is concerned, you can achieve what it does with this basically in gatsby-browser.js:

exports.onRouteUpdate = (location) => {
  if (location.hash) {
    setTimeout(() => {
      document.querySelector(`${location.hash}`).scrollIntoView();
    }, 0);
  }
};

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity.

[adrianescat]

native HTML anchor links are broken, even using import { Link } from "gatsby"; ...
Only this worked for me *:

import { navigate } from "@reach/router";

<div className="custom-link" onClick={() => {navigate("#section_id")}}>Section</div>

*But my website works with and without www. This approach only works for my website without www.

[magnusarinell]

navigate doesn't work for me either. I get redirected to my index page.