Skip to content

Routing works, but scroll bar remains static #101

@alexnbuchanan

Description

@alexnbuchanan

I added a HashLink, which (when I click "Projects" in my navbar) is to scroll to a section of my home page with an id of "projects". It works, the page is smooth scrolling to the correct section.

However, I'm noticing that my scroll bar isn't changing, and remains static. This is causing the section of my home page above the id to be cut off. Here is a video to demonstrate, notice the scroll bar doesn't change when I active the HashLink by clicking "Projects".

Is there a way I can correct this issue? My NavBar currently looks like this:

import React from "react";
import "./Nav.css";
import { HashLink } from "react-router-hash-link";

export default function Nav() {
  return (
    <div>
      <ul>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <HashLink smooth to="/#projects">
            Projects
          </HashLink>
        </li>
      </ul>
    </div>
  );
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions