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

Possible to create markdown anchors that jump to a position on the page when clicked? #4119

Closed
jiahaog opened this issue Feb 18, 2018 · 3 comments
Labels
type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@jiahaog
Copy link
Contributor

jiahaog commented Feb 18, 2018

Description

Hi, is there some way to create anchor markdown elements which jumps to a specific position on the page?

[Jump to Content](#content)

# Content

Expected behavior

I would like clicking the Jump to Content link to scroll the # Content heading into the page. I would also like navigating to the https://my-site-url/page-path/#content to automatically scroll the element into the page!

I've tried out the same markdown document on a GitHub markdown page, and it behaves as expected! (link to sample gist here)

I've looked at #386 and #302 with anchorate but it doesn't seem to work. Do I need to pass some special options to gatsby-transformer-remark in my gatsby-config.js to do this?

Thanks!!

Environment

Gatsby version: 1.9.158
Node.js version: v8.9.1
Operating System: macOS 10.13.3

I'm also just following the starter with gatsby-transformer-remark 1.7.28 to do this.

@mpolinowski
Copy link

There is already a plugin to link headers:

https://www.gatsbyjs.org/packages/gatsby-remark-autolink-headers/

I use it together with the Markdown TOC plugin in VS Code

@jiahaog
Copy link
Contributor Author

jiahaog commented Feb 18, 2018

Ah great, I didn't know this. Thanks a lot @mpolinowski !

@jiahaog jiahaog closed this as completed Feb 18, 2018
jiahaog added a commit to jiahaog/jiahao.codes that referenced this issue Feb 19, 2018
@fk fk added the type: question or discussion Issue discussing or asking a question about Gatsby label Feb 19, 2018
@danielsto
Copy link

Is it possible to remove the hovering icon left to the heading?

My options look like this:

{
         resolve: `gatsby-remark-autolink-headers`,
         options: {
         offsetY: `100`,
         icon: false,
         className: false,
         maintainCase: true,
         removeAccents: true,
},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Development

No branches or pull requests

4 participants