Reactでのトップへのスクロール方法

方法1: window.scrollTo()

Reactでは、windowオブジェクトのscrollTo()メソッドを使用してトップへスクロールすることができます。以下は使用例です。

import React from 'react';
function ScrollToTopButton() {
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };
  return (
    <button onClick={scrollToTop}>トップへスクロール</button>
  );
}
export default ScrollToTopButton;

この例では、トップへスクロールするためのボタンが表示されます。ボタンをクリックすると、スムーズなアニメーションでページのトップへスクロールします。

方法2: scrollIntoView()

もう一つの方法は、要素のscrollIntoView()メソッドを使用する方法です。以下は例です。

import React, { useRef } from 'react';
function ScrollToTopButton() {
  const topRef = useRef(null);
  const scrollToTop = () => {
    if (topRef.current) {
      topRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  };
  return (
    <>
      <div ref={topRef} />
      <button onClick={scrollToTop}>トップへスクロール</button>
    </>
  );
}
export default ScrollToTopButton;

この例では、div要素がページのトップを表しています。ボタンをクリックすると、div要素が表示される位置までスムーズにスクロールします。

以上がReactでページのトップへスクロールする方法の例です。必要に応じてこれらのコードをカスタマイズして使用してください。