CODEWITHSUNDEEP
reactjsgatsby
am guru prasath
am guru prasath

Reputation: 293

How to transition into specific part of the page usings its id with gatsby-plugin-transition-link plugin

My website has a navbar with where most of the links scrolls you to a section in the home page. I want to use gatsby page transition from another page and scroll into that particular section of the home page.

Something like this

<AniLink fade to="/#about-us">
  About Us
</AniLink>

I dont find any information about this in the official docs. How would I implement this feature.

Upvotes: 0

Views: 1387

Answers (2)

Nikki Pantony
Nikki Pantony

Reputation: 173

I would use Gatsby page transitions on the links to other pages and for the links to anchors on the same page use the smooth-scroll npm package: https://www.npmjs.com/package/smooth-scroll

Here is a medium post on how to set it up with Gatsby also: https://medium.com/@chrisfitkin/how-to-smooth-scroll-links-in-gatsby-3dc445299558

Alternatively, there are some Gatsby plugin options too including this one which looks nice: https://www.gatsbyjs.org/packages/gatsby-plugin-smoothscroll

Upvotes: 1

ShinaBR2
ShinaBR2

Reputation: 2705

AniLink is used for "Page transition". In your case, you need "scroll" transition. In other words, you just need smooth scrolling.

You can try react-scroll to achieve that.

Upvotes: 0

Related Questions