Scroll to a component on click on in React

Scroll to a component on click on in React #

To scroll to a component on click on in React:

1. Set a ref prop at the part you need to scroll to.
2. Set the onClick prop at a different part.
3. Each time the part is clicked, name the scrollIntoView() approach at the
   ref object.

import {useRef} from 'react';

export default serve as App() {
  const ref = useRef(null);

  const handleClick = () => {
    ref.present?.scrollIntoView({conduct: 'clean'});
  };

  go back (
    <div>
      <button onClick={handleClick}>Scroll to part</button>

      <div taste={{top: '155rem'}} />

      <div ref={ref}>Some content material right here</div>

      <div taste={{top: '155rem'}} />
    </div>
  );
}

We initialized a ref for the usage of the
useRef hook.

The useRef() the hook will also be handed a preliminary worth as a controversy. The hook
returns a mutable ref object whose .present belongings are initialized to the
handed argument.

After we cross a ref prop to a component, e.g. <div ref={myRef} />, React units
the .present belongings of the ref object to the corresponding DOM node.

We set the onClick prop at the button part, so each and every time it is clicked, the
handleClick serve as is invoked.

const handleClick = () => {
  ref.present?.scrollIntoView({conduct: 'clean'});
};

Within the handleClick serve as, we used the
scrollIntoView
strategy to scroll to the div part on which the ref prop is about.

The default worth for the conduct belongings is auto.

Each time the button is clicked, the scrollIntoView() approach is invoked on
the part on which we set the ref prop, and the part is made visual to
the consumer.