Smooth scrolling by Links

[kripod]

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.

[kripod]

Regular a tags should be used instead of Link elements for in-page navigation.

[milad1367]

can you talk me how to added this module in Gatsby and used it?

[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.

[milad1367]

thanks, .i don't know how to import this package in my Gatsby project . can you share complete code file?
I use this command "npm install smooth-scroll" to add this package to my modules project.
but I don't know what is next steps!

[kripod]

@milad1367 Here it is: https://github.com/simonyiszk/konferencia-web/blob/43d6570baf5f7bbf7d1ac9e64763854e5c8644cd/src/layouts/index.jsx#L23-L27

[milad1367]

thanks, man!

[kriim]

@kripod Did you try to make back/forth navigation work for anchor links when using smooth-scroll?

[TomPichaud]

@kripod

Having some issue with your code...
I need to click twice on the link to actually get the scroll... Any idea why ?
Also a direct access to http://myurl.com/#contact doesn't get me to #contact...

[kripod]

@kriim I did, but unfortunately, I could not make them work as intended.

@TomPichaud Please make sure that you are using regular <a> tags instead of <Link>s.

[krasserp]

Hi also working on a single page site with #hash navigation not using smooth-scroll but scroll-to-element. I also am having issues to directly scroll to an anchor on the page when trying to go directly to that anchor link like described by @TomPichaud . If anyone knows away around this that would be great. @kriim back/forth navigation I got to work with listening to the url href changeing

  if(typeof window !== 'undefined'){
    window.onload = goToHashValue
    window.onhashchange = goToHashValue
  }

[ryanditjia]

Hey guys, I made an anchor smooth scroll component using browser’s built-in smooth scroll behavior. One caveat is Safari doesn’t yet support it.

https://gist.github.com/ryanditjia/f66dd1d0e7dfd678a18dc4a15de8531d

Give it a try and let me know if it works for you.

Technique adapted from: https://pawelgrzybek.com/page-scroll-in-vanilla-javascript/#a-future-solution-using-scroll-behavior-smooth

[cgpro]

@ryanditjia thanks for the gist! A documentation would be very helpful.

[cgpro]

@ryanditjia I added a comment to your gist. Github dont send any emails for gist comments ... sorry for discussing it here :(

[ryanditjia]

Don’t worry about it. I stumbled across your comment yesterday when I opened the gist, wouldn’t have known otherwise. Shoot me an email (ryandi.tjia@gmail.com) or open a new issue if you have more questions!

[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

[joesayegh]

@kripod and @chrisfitkin - thank you so much!

[EdgarNigel]

Hey all, is it possible to adjust the scroll-speed somehow?

[penhold3r]

Hey all, is it possible to adjust the scroll-speed somehow?

if (typeof window !== 'undefined') {
	// eslint-disable-next-line global-require
	require('smooth-scroll')('a[href*="#"]', {
		speed: 800,
		speedAsDuration: true,
		easing: 'easeInOutCubic'
	})
}

@EdgarNigel it's in the module docs

[dalalRohit]

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.

Thank you for this Solution @kripod. But this doesn't work in production. With gatsby build, it says "window" is not available during server-side rendering."

[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.

Thank you for this Solution @kripod. But this doesn't work in production. With gatsby build, it says "window" is not available during server-side rendering."

Are you sure you’ve copied the if (typeof window !== "undefined") criteria correctly? It should prevent code execution during SSR.

[vveneracion]

Hey all, is it possible to adjust the scroll-speed somehow?

if (typeof window !== 'undefined') {
	// eslint-disable-next-line global-require
	require('smooth-scroll')('a[href*="#"]', {
		speed: 800,
		speedAsDuration: true,
		easing: 'easeInOutCubic'
	})
}

@EdgarNigel it's in the module docs

I tried to use this but it didn't work for me!

[lisandropat]

@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

Sadly I couldn't make it work when the <Link /> and the anchor ID are in different components, but both under the <Layout /> that contains the main code:

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

Has anyone gone thought this problem?

[Frostbourn]

I also couldn't make it work with the <Link />. Sadly smooth scroll works properly when using the <a> tags..