# React でボタン押してトップへスクロール

最もシンプルなやり方で押してトップへスクロールボタンを実装します。

"use client";
import React from "react";
import { FaAngleUp } from "react-icons/fa6";

const ScrollToTop: React.FC = () => {
  const handleScrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  return (
    <button
      className="fixed bottom-3 right-3 bg-green-300 text-white p-3 rounded-full shadow-lg hover:bg-primary"
      onClick={handleScrollToTop}
    >
      <FaAngleUp size={21} />
    </button>
  );
};

export default ScrollToTop;

# window scrollTo について

window.scrollTo は、ブラウザウィンドウの表示領域を特定の位置にスクロールさせる関数
window.scrollTo関数には 2 つのシグネチャがあります。

window.scrollTo(x-coord, y-coord)
- ウィンドウの表示領域を特定の水平位置 x および垂直位置 y 座標にスクロール
window.scrollTo(options)
- オプションオブジェクトを渡してスクロールの動作をより細かく制御

window.scrollTo({
  top: 0,
  behavior: "smooth",
}); // ページのトップへスムーズにスクロール

2024-07-28 1分前

react

Next.js に Tailwind CSS を実装

React Next.js に Tailwind CSS 実装してみました。...

react 強制的にレンダリングする方法

React使って値は変更されるけど、画面描写されないトラブルの対応方法...

# React でボタン押してトップへスクロール

# window scrollTo について

関連記事