How to scroll to a functional component in React?

Question

I am new to Reactjs. I have functional component that has Title defined, now i want scroll to be implemented when a user clicks on the title, user should be scrolled to appropriate functional component in the same page below

const Page = () => {

  return (
    <div>
         <div>
            About Us
        </div>
        <div>
            Contact Us
        </div>
        <AboutUs/>
        <ContactUs/>
   </div>
  );
};

In the above code scrolling should happpen when user clicks on About Us or Contact Us

Can someone please help me in implementing the scrolling?

Does this answer your question? [How to scroll to an element?](https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element) — frozen, Aug 08 '20 at 16:04

score 0 · Answer 1 · answered Aug 08 '20 at 17:39

Same old HTML technique can be used here. Point the link of your About or Contact us section, to the id of the wrapper element of that particular section.

const SomeComponent = () => {
    return (
        <div>
            // content...
            <a href="#about">About</a>
        </div>
    )
}

const About = () => {
    return (
        <div id='about'>
            // content...
        </div>
    )
}

How to scroll to a functional component in React?

1 Answers1

You can use Routing to consume multiple pages functionality in SPAs. Check out react-router-dom