How to stop screen scrolling when page navigation links are clicked, React-Bootstrap and Gatsby

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 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 the issue here: Lakeside Lumber & Hardware, your local building material supplier!

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;

Just in case someone finds this question in the future here is the answer:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.