【徹底解説】スムーススクロールを完全に制御する方法：React/Next.js編

'use client'

import { useEffect } from 'react'
import parse from 'html-react-parser'

export default function TOCScroll({ content }: { content: string }) {
  useEffect(() => {
    const timeout = setTimeout(() => {
      const anchors = document.querySelectorAll('.toc_list a[href^="#"]')

      const handleClick = (e: Event) => {
        e.preventDefault()
        const href = (e.currentTarget as HTMLAnchorElement).getAttribute('href')
        if (!href) return

        const target = document.querySelector(href)
        if (target) {
          const isMobile = window.innerWidth < 768
          const offset = isMobile ? 60 : 180
          const targetY = target.getBoundingClientRect().top + window.scrollY - offset
          smoothScrollTo(targetY, 1000)
        }
      }

      anchors.forEach(anchor => anchor.addEventListener('click', handleClick))
      return () => {
        anchors.forEach(anchor => anchor.removeEventListener('click', handleClick))
      }
    }, 0)

    return () => clearTimeout(timeout)
  }, [content])

  return <>{parse(content)}</>
}

function smoothScrollTo(targetY: number, duration = 1000) {
  const startY = window.scrollY
  const diff = targetY - startY
  const startTime = performance.now()

  const easeInOutCubic = (t: number) =>
    t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2

  const step = (currentTime: number) => {
    const elapsed = currentTime - startTime
    const progress = Math.min(elapsed / duration, 1)
    const eased = easeInOutCubic(progress)
    window.scrollTo(0, startY + diff * eased)
    if (progress < 1) requestAnimationFrame(step)
  }

  requestAnimationFrame(step)
}

import parse from 'html-react-parser'

const html = '<h2 id="section1">見出し</h2>'

return <>{parse(html)}</>