Scroll page to the nested React component on a button click

Question

I've got a React Component with several nested components. For page navigation I have a few buttons on the top. The question is, how to scroll the page to the nested react component when a certain button is clicked, is it possible to do so without using jquery libs?

  render() {
    return (
      <div>
        <button onClick={(e) => { console.log('Scrolling to Item 1');}}>Button0</button>
        <button onClick={(e) => { console.log('Scrolling to Item 2');}}>Button1</button>
          <Layout>
            <Item>
              <Content>
            ...
              </Content>
            </Item>

            <Item>
              <Content>
            ...
              </Content>
            </Item>

          </Layout>
        }
      </div>
    );
  }

Answer 1

Have you tried using an anchor?

Put an id attribute ('myTarget') to your target component and replace the button with a link (href: '#mytarget').

This does not work with fixed headers, unfortunately.

Answer 2

Using React hooks and no 3rd party packages:

1. Create a reference using the React hook useRef

import { useRef } from 'react'
const firstItemRef = useRef(null);

2. Assign the reference to the component you want to scroll to

<Item ref={firstItemRef}>

3. Use the scrollIntoView method to scroll to the specific Element/Component

<button onClick={() => firstItemRef.current.scrollIntoView()}

Answer 3

1. Create a reference using useRef

   const trackButton = useRef();
   

2. Use scrollIntoView method to scroll to the specific Element/ Component

       trackButton.current.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })