Gatsby: Possible to create markdown anchors that jump to a position on the page when clicked?

[jiahaog]

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]

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]

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

[danielsto]

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,
},