Reactでスクロールをトップに戻す方法

ボタンをクリックしてトップに戻る: 最も一般的な方法は、ユーザーがボタンをクリックするとページのトップにスクロールするようにすることです。以下はその例です。

import React, { useState } from 'react';
const ScrollToTopButton = () => {
  const handleClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <button onClick={handleClick}>トップに戻る</button>
  );
};
export default ScrollToTopButton;

この例では、window.scrollTo() メソッドを使用してページのトップにスクロールします。behavior: 'smooth' を指定することで、スムーズなスクロール効果を得ることができます。

Reactフックを使用する: Reactのフックを使用してスクロールの状態を管理し、トップにスクロールすることもできます。以下はその例です。

import React, { useState, useEffect } from 'react';
const ScrollToTop = () => {
  const [isVisible, setIsVisible] = useState(false);
  const handleScroll = () => {
    if (window.pageYOffset > 300) {
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  return (
    <div>
      {isVisible && (
        <button onClick={scrollToTop}>トップに戻る</button>
      )}
      {/* ここにコンテンツを表示 */}
    </div>
  );
};
export default ScrollToTop;

この例では、useState フックを使用してスクロールの可視性を管理し、useEffect フックを使用してスクロールイベントのリスナーを追加しています。スクロール位置が300を超えると、ボタンが表示され、クリックするとトップにスクロールします。

これらはReactでスクロールをトップに戻すためのいくつかの一般的な方法です。必要に応じて、これらの例をカスタマイズして使用することができます。