reactjsgatsby

Change Gatsby Link Behaviour - Stop Scroll Animation on Page Change


I'm sure this is going to be a very straight forward answer, but I can't for the life of me work out how to get my Gatsby/React site to start at the top of a new page without a scroll transition effect when I click on an internal link.

Example: On my home page I scroll to the bottom, then click on a link to take me to an 'About Me' page. The About Me Page loads with the browser scroll position still at the bottom of the page and then the window scrolls to the top of the page. This only takes a few milliseconds but when I click on a link I want to start at the top of the page without any transition.

The links are all standard Gatsby Links:

    <Link className="" to="/aboutme/">
      About Me
    </Link>

Thanks!

EDIT

Adding in my layout wrapper, with useScrollRestoration hooks added:

import React from 'react'
import PropTypes from 'prop-types'
import useScrollRestoration from 'gatsby'

import NavBar from './NavBar/NavBar'
import Footer from './Footer/Footer'

import './layout.scss'

const Layout = ({ children }) => {
  const aboutMeScrollRestoration = useScrollRestoration(`page-component-main`)

  return (
    <>
      <NavBar />
      <main className="bumpdown" {...aboutMeScrollRestoration}>
        {children}
      </main>
      <Footer />
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Solution

  • I managed to work this out in the end after a lot of Googling. It appears not to be a scrollRestoration issue but a Bootstrap issue. In bootstrap/scss/_reboot.scss there's the following code:

    :root {
      font-size: $font-size-root;
    
      @if $enable-smooth-scroll {
        @media (prefers-reduced-motion: no-preference) {
          scroll-behavior: smooth;
        }
      }
    }
    

    This can be turned off either using $enable-reduced-motion: true; or $enable-smooth-scroll: false; in bootstrap overrides which stops the scrolling behaviour when a new page opens.

    I'm using the enable-smooth-scrolling:false option as the other option may have further knock on effects.