Smooth scrolling by Links

Today, I tried my best to implement anchor-based smooth scrolling for a single-page application, but failed after multiple tries. I wanted to add smooth scrolling for my Link elements (from gatsby-link) using the following libraries:

• https://github.com/alicelieutier/smoothScroll
• https://github.com/cferdinandi/smooth-scroll

I also tried some React-targeted alternatives, but they didn’t work either. Unfortunately, I could not find an answer to this problem, so I would highly appreciate any kind of assistance.

[chrisfitkin]

@kripod thanks your code snippet worked great for my site!

I used it to write a small demo with instructions in case it helps anyone in the future.

demo code: https://github.com/chrisfitkin/gatsby-smooth-scroll-demo/ instructions: https://medium.com/@chrisfitkin/how-to-smooth-scroll-links-in-gatsby-3dc445299558

[kripod]

Sure!

if (typeof window !== 'undefined') {
  // Make scroll behavior of internal links smooth
  require('smooth-scroll')('a[href*="#"]');
}

Every a element pointing to an internal link gets smooth scrolling behavior by the code above.