React(Next.js)でTopへ戻るボタンを実装する方法【ライブラリ使用無し】

React(Next.js)でTopへ戻るボタンを実装する方法になります。
ライブラリ等は使用しないので、導入もしやすいかと思います。

クリックイベントを設定する

ReturnTopButton.tsx

const ReturnTopButton = () => {
  return <button onClick={returnTop}>ボタン</button>
}

export default ReturnTopButton

まずは、コンポーネントを作り、クリックイベントを設定します。

Topへ戻るイベントを追加する

ReturnTopButton.tsx

const ReturnTopButton = () => {

  const returnTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  }

  return <button onClick={returnTop}>ボタン</button>
}

export default ReturnTopButton

window.scrollToメソッドを使用して、Topへ戻す処理をしています。
behavior: smoothとオプションを指定することで、スムーズスクロールさせることができます。
behavior: autoだと一瞬で移動します。

スクロールしたらTopへ戻るボタンが表示するようにする

初期表示ではTopへ戻るボタンを表示させずに、ある程度スクロールしたら表示させる方法です。

ReturnTopButton.tsx

import { useEffect, useState } from 'react'

const ReturnTopButton = () => {
  const [isButtonActive, setIsButtonActive] = useState(false)

  const returnTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  }

  useEffect(() => {
    window.addEventListener('scroll', scrollWindow)
    return () => {
      window.removeEventListener('scroll', scrollWindow)
    }
  }, [])

  const scrollWindow = () => {
    const top = 100  //ボタンを表示させたい位置
    let scroll = 0
    scroll = window.scrollY
    if (top <= scroll) {
      setIsButtonActive(true)
    } else {
      setIsButtonActive(false)
    }
  }

  const normalStyle = {
    opacity: 0,
    transition: '0.5s',
    pointerEvents: 'none'
  }
  const activeStyle = {
    opacity: 1,
    transition: '0.5s'
  }
  const style = isButtonActive ? activeStyle : normalStyle

  return (
    <button style={style} onClick={returnTop}>
      ボタン
    </button>
  )
}

export default ReturnTopButton

useEffectでwindowイベントを設定します。
useStateの真偽値によってスタイルを変えることで、ボタンを表示を変えています。

iosではbehavior: 'smooth'が効かない時の対処

iosでは、スムーススクロールが効かないことがあります。
その場合は、Polyfillで対処できます。

yarn add scroll-behavior-polyfill

import 'scroll-behavior-polyfill'