Scroll to top on page refresh

[ashleybeshir]

Summary

When the page refreshes i want it to scroll to top of the page. I added window.scrollTo(0, 0); into both componentDidUpdate and componentDidMount. So it should be doing it ? but when page refreshes it still stays at the same Y scroll position

Relevant information

Their are few other tickets for this issue in gatsby 1 but not sure if it been fixed in gatsby 2

Environment (if relevant)

System:
OS: Windows 10
CPU: (8) x64 AMD FX(tm)-8350 Eight-Core Processor
Binaries:
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.0.19 => 2.0.19
gatsby-image: ^2.0.15 => 2.0.15
gatsby-plugin-emotion: ^2.0.6 => 2.0.6
gatsby-plugin-manifest: ^2.0.5 => 2.0.5
gatsby-plugin-no-sourcemaps: ^2.0.1 => 2.0.1
gatsby-plugin-offline: ^2.0.5 => 2.0.5
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
gatsby-plugin-sharp: ^2.0.7 => 2.0.7
gatsby-source-filesystem: ^2.0.4 => 2.0.4
gatsby-transformer-sharp: ^2.1.4 => 2.1.4

[sidharthachatterjee]

This was fixed in #8359

Can you link to a minimal reproduction for this?

[ashleybeshir]

Hello @sidharthachatterjee ,
it is reproducible in the latest 'gatsby new {sitename}'.
i changed the index page component into a class. The code for it should be underneath this line.

import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'
import Image from '../components/image'
import SEO from '../components/seo'

class IndexPage extends React.Component {
  constructor(props)
  {
    super(props);
    //window.scrollTo(0,0);
  }

  componentDidUpdate()
  {
    //window.scrollTo(0,0);
    console.log("test-update");
  }

  componentDidMount()
  {
    window.scrollTo(0,0);
    console.log("test-mount");
  }
  render() {
    return <Layout>
        <SEO title="Home" keywords={['gatsby', 'application', 'react']} />
        <h1>Hi people</h1>
        <p>Welcome to your new Gatsby site.</p>
        <p>Now go build something great.</p>
        <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
          <Image />
        </div>
        <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
          <Image />
        </div>
        <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
          <Image />
        </div>
        <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
          <Image />
        </div>
        <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
          <Image />
        </div>
        <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
          <Image />
        </div>
        <Link to="/page-2/">Go to page 2</Link>
      </Layout>;
  }

}

export default IndexPage

[sidharthachatterjee]

Hey @ashleybeshir

What you're seeing is intended scroll behaviour. Gatsby maintains the scroll position of a page and restores it after refresh.

The window.scrollTo is not working likely because of how it is interacting with Gatsby's own scroll management code (which you can find here)

A cleaner and more reliable way to manage scroll behaviour is by using the shouldUpdateScroll browser API.

[ashleybeshir]

@sidharthachatterjee Thank you will have a look at them now

[sidharthachatterjee]

@ashleybeshir You're welcome 🙂

I'm closing this in the mean time but please feel free to reopen this if there is anything else.