Best solution for smooth-scrolling anchors and page-transitions?

[thebarty]

Hi guys,

does anyone have a working setup that support BOTH page-transitions AND smooth-scrolling to anchors?

I am using this "trick" to support page-transitions https://github.com/gatsbyjs/gatsby/blob/master/examples/using-page-transitions/gatsby-browser.js

Now when adding any of the available react smooth-scroll components I am getting weird flashes when the anchors appears in the window, or is added to the url.

I have tried those libraries: https://www.npmjs.com/package/react-anchor-link-smooth-scroll https://github.com/gabergg/react-scrollable-anchor https://www.npmjs.com/package/react-scrollchor

Does anyone have a working setup and some tricks to share?

[ryanditjia]

Can’t help with page transitions, but I made my own helpers and components using vanilla JS and React components to deal with anchors.

The gist is here and demo here. Site is WIP.

Caveat is the smooth scroll doesn’t yet work with Safari. But it fixes several problems that Gatsby (React Router ?) have with regards to page anchors. Plus it isn’t too much code.

Let me know if it works for you.

Note: I referred to this blog post to make the smooth scroll behavior.

[thebarty]

@ryanditjia thanks for the tip.

Right now I have switched off transitions and am using https://www.npmjs.com/package/react-anchor-link-smooth-scroll

[ryanditjia]

Cool, I think I can use the polyfill to make my method work with Safari.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!