react で smooth scroll 実装

reactでスムースにスクロールさせた時のメモ

sample.tsx

import { memo, useRef } from "react";

const sample = () => {
    const ref = useRef<HTMLDivElement>(null);
    
    const scrollToTarget = () => {
        // scrollIntoViewのbehaviorオプションで"smooth"を追加
        ref?.current?.scrollIntoView({ behavior: "smooth" });
    };
    
    return (
        <>
            <button　onClick={scrollToTarget}>
              目的地までスムーズにスクロールします
            </button>
            
            // （省略）
            
            // スクロールする要素へref追加
            <div ref={ref}>Target</div>
        </>
    )
}