What's happening is if I scroll down to the bottom of the home page, click "Rental" in the nav, then click the logo in the nav to go back to the home page, the home page scrolls down to the bottom of the page rather than staying at the top (what would be expected). This happens with all the pages if they are visited scrolled down, navigated away and back they will scroll down. Even with a hard browser refresh or going to a different website and then viewing my site, the page will still scroll down.

I was using Bootstrap 4. I refactored to use Bootstrap 5 and this is when I noticed the scrolling. So I decided to try React-Bootstrap 2.0.0 but the problem persists.

You can see issue here: https://eoja82.github.io/lakeside-demo/

The Bootstrap 5.1.3 cdn link I'm using:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

This is my nav:

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import styles from "./styles/nav.module.css"
import { withPrefix } from "gatsby"
import Container from "react-bootstrap/Container"
import Nav from "react-bootstrap/Nav"
import Navbar from "react-bootstrap/Navbar"
import NavDropdown from "react-bootstrap/NavDropdown"


function Navigation() {
  /* const activeStyles = {
    color: "rgb(255, 255, 255, .75)"
  } */
  return (
    <StaticQuery id={styles.container}
      query={graphql`
        query SlugQuery {
          allDataJson {
            nodes {
              slug
            }
          }
        }
      `}
      render={data => (
        <Navbar collapseOnSelect expand="sm" variant="dark" bg="dark" fixed="top" style={{"--bs-bg-opacity": ".9"}}>
          <Container fluid>
            <Navbar.Brand href={withPrefix("/")}>
              <img 
                src={withPrefix("/img/logo.png")} 
                alt="logo" 
                width="87.5px" height="50px">
              </img>
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="me-auto">
                <NavDropdown title="Products" id="collapsible-nav-dropdown">
                  {data.allDataJson.nodes.map(({slug}, i) => {
                      let split = slug.split("/")
                      let listItem = split[2].replace(/-/g, " ")
                      return (
                        <NavDropdown.Item href={withPrefix(slug)} key={i} className={styles.dropdownItem}>{listItem}</NavDropdown.Item>
                      )
                    })}
                </NavDropdown>
                <Nav.Link href={withPrefix("/rental")}>Rental</Nav.Link>
                <Nav.Link href={withPrefix("/specials")}>Specials</Nav.Link>
                <Nav.Link href={withPrefix("/contact")}>Contact</Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      )}
    />
  )
}

export default Navigation;

I tried using the the bootstrap 4 cdn link, that did not fix the scroll problem.

CodePudding user response：

This behavior is known as scroll restoration. There's a Gatsby Browser (gatsby-browser.js) API that allows you to control this behavior automatically rather than adding the useScrollRestoration in the view component as the docs suggests. You can use shouldUpdateScroll API:

exports.shouldUpdateScroll = () => { return false; };

Or for customizing the scroll in certain pages:

exports.shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition,
}) => {
  const { pathname } = location
  // list of routes for the scroll-to-top-hook
  const scrollToTopRoutes = [`/privacy-policy`, `/page-2`]
  // if the new route is part of the list above, scroll to top (0, 0)
  if (scrollToTopRoutes.includes(pathname)) {
    window.scrollTo(0, 0)
  }

  return false
}

Another workarounds:

• https://www.joshwcomeau.com/gatsby/the-worlds-sneakiest-route-change/