React.jsでScrollアニメーションの追加方法

(1)yarn add react-scroll

(2)

index.tsx

import { animateScroll as scroll } from 'react-scroll'

const Home: React.FC = () => {
  const scrollToTop = () => {
    scroll.scrollToTop()
  }
  return (
	<div className={styles.container}>
	  <BackButton className={styles.backButton} onBackClick={scrollToTop} />
	</div>

(3)ページ内の特定の場所にスクロールする
SectionQuestionというコンポネントにidというPropsが渡されています。
pagesの呼び出し先で、idを設定します。

scrollToQというreact-scrollの関数を用意し、以下のようにオプションを追加します。
duration:スクロールにかかる秒数
delay: 遅延
smooth: アニメーションスクロール
offset: idのコンポーネントの上端からずらす

スクロールのトリガーにしたいボタンの、onClickにscrollToQを渡すと、SectionQuestionにスクロールする。

index.tsx

import SectionQuestion from '../../components/domains/SectionQuestion'
import { animateScroll as scroll, scroller } from 'react-scroll'
import Footer from '../../components/domains/Footer'

export const Index = () => {
  const scrollToQ = () => {
    scroller.scrollTo('question', {
      duration: 1000,
      delay: 0,
      smooth: true,
      offset: -50,
    })
  }
  return (
    <div>
      <SectionQuestion id="question" />
      <Footer
        onAboutClick={scrollToQ}
      />
    </div>
  )
}

オプションの詳細はgithubに載っています。
https://github.com/fisshy/react-scroll