Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Anchor Links, part 2 #386

Closed
ivanoats opened this issue Aug 10, 2016 · 15 comments

Comments

@ivanoats
Copy link
Contributor

commented Aug 10, 2016

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

I know #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

This comment has been minimized.

Copy link
Contributor Author

commented Aug 10, 2016

@ivanoats

This comment has been minimized.

Copy link
Contributor Author

commented Aug 10, 2016

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

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Aug 11, 2016

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

This comment has been minimized.

Copy link
Contributor Author

commented Aug 11, 2016

  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

This comment has been minimized.

Copy link
Contributor

commented Aug 11, 2016

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 notifications@github.com
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
#386 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh_nmVkdTdRMrPd3TEyifrgOvE36Dks5qeqgGgaJpZM4Jho9v
.

@rojobuffalo

This comment has been minimized.

Copy link

commented Sep 12, 2016

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

This comment has been minimized.

Copy link

commented Sep 24, 2016

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

@f0rr0

This comment has been minimized.

Copy link

commented Sep 24, 2016

@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

This comment has been minimized.

Copy link

commented Sep 24, 2016

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

This comment has been minimized.

Copy link
Contributor Author

commented Sep 25, 2016

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 notifications@github.com 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

This comment has been minimized.

Copy link

commented Sep 25, 2016

Confirmed this is a react-router-scroll issue.
#462 (comment)
taion/react-router-scroll#10

@f0rr0

This comment has been minimized.

Copy link

commented Sep 26, 2016

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

This comment has been minimized.

Copy link

commented Oct 22, 2017

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 stale bot added the stale? label Oct 22, 2017
@stale

This comment has been minimized.

Copy link

commented Nov 7, 2017

This issue has been automatically closed due to inactivity.

@stale stale bot closed this Nov 7, 2017
ThomasAndrewMacLean added a commit to ThomasAndrewMacLean/portfolio that referenced this issue Aug 1, 2019
Without the hashtags they open new pages => 404

Anchor links don't work on chrome, tried this but didn't have much success  😔
gatsbyjs/gatsby#386 (comment)
@adrianescat

This comment has been minimized.

Copy link

commented Oct 17, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
5 participants
You can’t perform that action at this time.