Gatsby（GatsbyJS）でトップに戻る（Scroll to Top） | Gatsbyブログカスタマイズ

目次（Table of contents）を作成した際にreact-scrollを導入したので、利用してトップに戻るを実装します。

pagetop.jsの作成

src/components/pagetop.jsを新規作成します。

複雑なことはしていないので、非常にシンプルな記述です。
ポイントは、Gatsby（GatsbyJS）の書き方ではなく、Reactの書き方であるということ。

import React from "react"
import { animateScroll as scroll } from "react-scroll"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faChevronUp } from "@fortawesome/free-solid-svg-icons"

class PageTop extends React.Component {

  scrollToTop = () => {
    scroll.scrollToTop()
  }

  render() {
    return (
      <div className="pagetop">
        <button className="pagetop__btn" onClick={this.scrollToTop}><FontAwesomeIcon icon={faChevronUp} />トップへ戻る</button>
      </div>
    )
  }
}

export default PageTop

pagetopの呼び出しとPageTopの呼び出し

いずれかのレイアウトにて作成したトップに戻る（Scroll to Top）を呼び出します。
Webサイト高速化のための静的サイトジェネレーター活用入門のカスタマイズであれば、 src/components/layout.jsが良さそうです。

import PageTop from "../components/pagetop"
...
<PageTop />

スタイル調整

CSSでスタイルを調整します。
SCSSではありますが、参考までに以下に示します。

.pagetop {
    display: flex;
    justify-content: center;

    &__btn {
        background-color: #222;
        border: none;
        cursor: pointer;
        padding: 0;
        appearance: none;
        padding: 0.75em 1em;
        color: #fff;

        .svg-inline--fa {
            padding-right: 0.25em;
        }
    }
}

関連記事