فرض کنید در یک صفحه html قرار داریم و می خواهیم با کلیک بر روی یک باتن، به یک المان خاص scroll کنیم. برای این کار می توانیم از تابع scrollIntoView استفاده کنیم.

کافی است تا برای المانی که می خواهیم نهایتاً به آن اسکرول کنیم یک رفرنس یا ref تعریف کنیم و بعد در تابع کلیک باتن مان، تابع scrollIntoView را روی رفرنس آن المان فراخوانی کنیم:

import { useRef } from 'react';

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

  const handleClick = () => {
    ref.current?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <button onClick={handleClick}>Scroll to element</button>

      <div style={{ height: '150rem' }} />

      <div ref={ref} style={{ backgroundColor: 'lightblue' }}>
        Coding Beauty
      </div>

      <div style={{ height: '150rem' }} />
    </div>
  );
}