javascript - Scrolling to another page in my project starts about half way and not at the top

Question

I have this issue when I click on a page within project it starts about half way then scrolls up automatically to the top. In my navbar I have 3 sections Home, Software, Design. They all have a href="/#id" id assigned to them to scroll to that section of the homepage when clicked. I noticed when I include this code below it affects the Scroll To Top code and causes this issue. I am including the scroll-behavior to have a smooth transition when clicking on the navbar sections.

html {
  transition: 3s;
  scroll-behavior: smooth;
}

This is my code for the scroll to top to make the page start at the top which works fine when I don't include the code above.

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

How can I have both functionalities to work and have my pages start at the top every time? Thank you.

Answer 1

等待大神解答