【Astro】 Astro Boilerplateにページトップへ戻るボタンを実装してみる

はじめに

---

このサイトのベーステーマには、Astro Boilerplateを使用しています。
このテーマは、ページトップに戻るボタンを表示する機能を装備していません。そのため、自分で調べて実装してみようと思います。

この機能の必要性について

---

そもそもの話しなのですが、ページトップに戻る機能は各デバイスに搭載されています。
代表的なプラットフォームでの方法は下記になります。

プラットフォーム	方法
Windows	Home
OS X	command + ↑
iPhone	ステータスバーをタップ
Android	N/A

代表的なプラットフォームでは、Androidのみ未実装になっています。
Androidのためだけに、この機能を実装するのかと考えると、確かに一考の余地はありそうです。

しかし、他のデバイスでのページトップに戻る機能を知らない人も多いと思いますし、世界的なスマホOSシェア率を考えると、必要性は有ると思います。

実装してみる

---

Base.astroのhead内に下記を追加します。

    <script is:inline src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script>
    $(document).ready(function() {
      var pagetop = $('.pagetop');

      $(window).scroll(function () {
         if ($(this).scrollTop() > 1500) {
              pagetop.fadeIn();
              pagetop.css('display', 'flex');
         } else {
              pagetop.fadeOut();
         }
      });

      pagetop.click(function () {
         $('body, html').animate({ scrollTop: 0 }, 500);
         return false;
      });
    });
    </script>

次に、Base.astroのbody内に下記を追加します。

<a class="pagetop" href="#"><div class="pagetop__arrow"></div></a>

次に外観を調整します。Astro Boilerplateはスタイルに関して、Tailwind CSSのみを使用しているので、自前のCSSファイルを持っていません。適当な場所に作ります。

今回は、src/styles/main.css に作りました。中身は下記です。

html {
    scroll-behavior: smooth;
}

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #e8e8f2;
    border: solid 2px #000;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

最後に、作ったCSSファイルをBase.astroにインポートして終わりです。

import '../styles/main.css';

それぞれの色の調整は、自身のサイトに合うように調整して下さい。