How do I scroll to a component in React?

Question

I would like to know how can I scroll to a component instead of just instant view the component

So I have the following from my Overview component

<a className="more-text group" href="#about">
     <h3 className="title">+ </h3>
     <h3 className="title">learn more</h3>
</a>

And the comnponent stays in my Home component

class Home extends React.Component {
    render() {
        return (
            <div>
                {/* Header */}
                <Header />

                {/*Overview Component*/}
                <Overview />

                {/* About Component*/}
                <About />

                {/*Footer Component*/}
                <Footer />
            </div>
        );
    }
}

Possible duplicate of [ReactJS how to scroll to an element](https://stackoverflow.com/questions/43441856/reactjs-how-to-scroll-to-an-element) — Tymek, Sep 19 '19 at 09:54

score 0 · Answer 1 · answered Sep 19 '19 at 11:25

I see you want to achieve this with url hash parameters, So go ahead and simply assign ids to your components, and change the url when you want to scroll.

<Header />

{/*Overview Component*/}
<Overview id="overview" />

{/* About Component*/}
<About id="about" />

{/*Footer Component*/}
<Footer id="footer" />

How do I scroll to a component in React?

1 Answers1