Change Gatsby Link Behaviour - Stop Scroll Animation on Page Change

user_13796873 0
Viewed 1793

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
gatsby reactjs
3 Answers

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.

user_137968730

This issue is known as Scroll Restoration. @reach/router (from where Gatsby extends its routing) handles it automatically. However, in some cases, it fails, especially when rendering containers that have their own scroll values. To bypass this "issue", Gatsby exposes a useScrollRestoration hook to restore the scroll position. For example:

import { useScrollRestoration } from "gatsby"
import countryList from "../utils/country-list"

export default function PageComponent() {
  const ulScrollRestoration = useScrollRestoration(`page-component-ul-list`)

  return (
    <ul style={{ height: 200, overflow: `auto` }} {...ulScrollRestoration}>
      {countryList.map(country => (
        <li>{country}</li>
      ))}
    </ul>
  )
}

So, in your destination component (/aboutme/ page), use the useScrollRestoration hook in your outer wrapper to restore the scroll position.

user_55853710

I created a custom.scss file and imported it into the gatsby-browser.js file. The contents of the scss file is overriding the default value of the scroll-behaviour in bootstrap:

$enable-smooth-scroll: false;
:root {
  scroll-behavior: auto !important;
}
@import "node_modules/bootstrap/scss/bootstrap";
user_32000800
Related