html - Why does refreshing an anchor link / trying to go directly to an anchor link go to the top of the page?

Question

I have buttons in a site, and naturally, I've created anchors and links pointing to those anchors. The buttons work, but when I refresh the page or try to go to that specific anchor from a new tab (for instance), it always directs to the top of the page.

(e.g. In the code below, there is a section with id "about". When I click on the button that reads "about" in my nav bar, it changes the url to ".../#about" and goes to that section. However, when I refresh my page with the url ".../#about" or try to go to ".../#about" from a new tab, it always goes to the top of the page (the url doesn't change to "..." though, so it's not redirecting).)

I want the user to be able to go to ".../#about" and go directly to the about section when going from a new tab or different site, but how would I do that? Thanks!

Here's my code (please let me know if there's more you'd like to see):

const Index = () => {
    return (
        <div>
            <Header />

            <div className="all-content">
                <Hero />

                <Social />

                <section id="about">
                    <About />
                </section>

                <section id="projects">
                    <Projects />
                </section>

                <section id="hobbies">
                    <Hobbies />
                </section>

                <section id="contact">
                    <Contact />
                </section>
            </div>
        </div>
    );
}

export default Index;

标签： htmlreactjs