Skip to content

Hashtag doesn't change on current page #38

@konstantinschuette

Description

@konstantinschuette

Hello,

so I got these two files with the AnchorLink setup properly.

index.js

import * as React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import SEO from "../components/seo"
import { AnchorLink } from "gatsby-plugin-anchor-links"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />

    <AnchorLink to="/#test">got to #test</AnchorLink>
    <div style={{ marginTop: 800 }}></div>
    <div id="test">test</div>

    <Link to="/page-2/">Go to page 2</Link>
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>
)

export default IndexPage

page-2.js

import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

const SecondPage = () => (
  <Layout>
    <SEO title="Page two" />
    <Link to="/#test">Go back to #test</Link>
  </Layout>
)

export default SecondPage

Now if I'm on my Index page, I want that if i click on <AnchorLink to="/#test">got to #test</AnchorLink> that the hashtag gets added to the URL. The default behavior is, that it just scrolls to to #test, but doesn't add the hashtag to the link.
How can I archive that?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions