# 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