CODEWITHSUNDEEP
reactjsreact-routergatsby
tateccf
tateccf

Reputation: 135

React - Prevent scrolling to top after changing query params

In my Gatsby app I have a page that includes a pagination component.

By default, the path is: '/?page=1' and clicking the pagination buttons changes to '/?page=2', '/?page=3' ...

I am "saving" the page number in the path because I want the browser to remember the page number the user was on previously, in case he clicks the go back button of the browser.

The problem with this approach is that every time the path is changed, the page automatically is scrolling to the top, and I do not want it to scroll to the top.

Does anyone know the way to prevent that?

Upvotes: 1

Views: 1281

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29335

This is the default Gatsby behavior (known as Scroll Restoration). You have exposed the useScrollRestoration hook in order to play with this behavior (and change it accordingly to your specifications). 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>
  )
}

In your case, you should add your element class name.

Related GitHub threads:

Upvotes: 1

Related Questions