react-scrollでTopに戻るための自動スクロールを実装

ここ最近は、自社のホームページ作成を担当しています。作成過程でreact-scrollを使用した自動スクロールを実装したので、その時のまとめです。

１、react-scrollをインストールします。

yarn add —dev react-scroll
yarn add —dev @types/react-scroll

２、 Scrollで移動して欲しい要素(位置)にidを指定します。 今回はidをtopにしました。こちらは任意の値をつけてください。

//移動先の要素
<section id=“top”> … </section>

3, React-scrollからLinkをimportします。 Next.jsではLinkタグが既にあるので、別名importをするのが良いと思います。

import {Link as Scroll} from “react-scroll”

4, アクションが発火して欲しい要素をLink(別名importしたのでScroll)タグで囲みます。 to={idで指定した値}を割り振ります。

//発火してほしい要素（この要素をクリックしたら移動)
<Scroll to=“top”> … </Scroll>

これだけで,簡単に自動スクロールができるようになりました。

react-scrollのオプション

react-scrollにはさまざまなオプションがあります。

他にもあるので、興味のある人はGitHubを覗いてみてください。 【react-scroll】

自分のブログでも実装

react-scrollをこのサイトにも実装しました

headerにidを指定

  <header id="top">

React-scrollをimportしてスクロールタグで囲みTopボタンをScrollタグで囲む 今回はオプションでアニメーション化(smooth)と、移動時間を0.3秒(duration)にしました。

import { Link as Scroll } from "react-scroll";

export const TopButton = (): JSX.Element => {
  return (
    <Scroll
      to="top"
      smooth={true}
      duration={300}
      className={`fixed z-30 -bottom-4 left-4 animate-roll-in-left`}
    >
      <button
        className={`cursor-pointer hover:opacity-95 mt-2 mb-7 opacity-80 bg-gray-100 h-8 w-8 sm:h-10 sm:w-10 mx-auto transform rotate-12 text-center border-4 border-double border-blue-400 `}
      >
         TOP
      </button>
    </Scroll>
  );
};

無事にTopを押すと、一番上に移動するようになりました。 使用したことないライブラリ触るのは、テンション上がりますね。

では、また。