Reactで良い感じにページ内アンカー（ページ内遷移）を実装する

www.npmjs.com

github.com

これ便利。

import { Element, Link as ScrollLink } from 'react-scroll'

<ScrollLink to="section" smooth={true} duration={500}>
  TextText
</ScrollLink>

<Element name="section">
  Section
</Element>

これでScrollLink to="section"を押下時にスムーススクロールでElement name="section"まで遷移してくれる。

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

<ToTopButton onClick={() => scroll.scrollToTop()}>
  トップに戻る
</ToTopButton>

これでトップにスムーススクロールで遷移できる。