JavaScriptとReactで要素にスクロールする方法

方法1: Element.scrollIntoView() この方法は、要素が表示されるようにスクロールするための最も簡単な方法です。

const element = document.getElementById("targetElement");
element.scrollIntoView();

方法2: window.scrollTo() この方法は、ウィンドウ全体をスクロールするためのものですが、特定の要素にスクロールするためには要素の座標を指定する必要があります。

const element = document.getElementById("targetElement");
const y = element.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({ top: y, behavior: 'smooth' });

方法3: ReactのScrollIntoViewコンポーネント Reactには、要素にスクロールするための便利なライブラリやコンポーネントがいくつかあります。その中でも一つはreact-scroll-into-viewです。

まず、react-scroll-into-viewをインストールします。

npm install react-scroll-into-view

次に、以下のようにコンポーネントを使用します。

import ScrollIntoView from 'react-scroll-into-view';
// ...
<ScrollIntoView selector="#targetElement">
  <button>要素にスクロール</button>
</ScrollIntoView>

これにより、ボタンをクリックすると指定した要素にスクロールされます。

これらはいくつかの方法ですが、他にもさまざまな方法があります。特定の状況に応じて最適な方法を選択してください。