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 · 16 comments
Closed

Anchor Links, part 2 #386

ivanoats opened this issue Aug 10, 2016 · 16 comments
Labels
stale?
Projects

Comments

@ivanoats
Copy link
Contributor

@ivanoats ivanoats 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
Copy link
Contributor Author

@ivanoats ivanoats commented Aug 10, 2016

@ivanoats
Copy link
Contributor Author

@ivanoats ivanoats commented Aug 10, 2016

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

@KyleAMathews
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link
Contributor Author

@ivanoats ivanoats 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
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link

@rojobuffalo rojobuffalo 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
Copy link

@f0rr0 f0rr0 commented Sep 24, 2016

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

@f0rr0
Copy link

@f0rr0 f0rr0 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
Copy link

@f0rr0 f0rr0 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
Copy link
Contributor Author

@ivanoats ivanoats 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
Copy link

@f0rr0 f0rr0 commented Sep 25, 2016

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

@f0rr0
Copy link

@f0rr0 f0rr0 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
Copy link

@stale stale bot 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
Copy link

@stale stale bot commented Nov 7, 2017

This issue has been automatically closed due to inactivity.

@stale stale bot closed this as completed 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
Copy link

@adrianescat adrianescat 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.

@magnusarinell
Copy link

@magnusarinell magnusarinell commented Dec 22, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stale?
Projects
No open projects
Development

No branches or pull requests

6 participants