【超簡単】CSSのみでページトップボタンを実装する方法

2023.10.16

URLをコピーしました！

ページトップボタンの実装方法がわからない。
ページトップボタンの動作の実装方法がわからない。

このような悩みに答えます。

webサイトでよく見かけるページトップボタン。スルスル〜っとトップまで移動してくれるので便利ですよね。
特にLPなど、長いサイトではその恩恵も大きいです。

この記事では、ページトップボタンの実装方法とその活用について詳しく解説します。

結論

時間がない人の為に結論です。
私は以下のコードで実装しています。

See the Pen Untitled by すずき (@k-suzuki3533) on CodePen.

<body>にid=”body”を付与し、そこに向けて内部リンクを貼るだけです。
スルスル〜という動きは以下のCSSのみで実装できます。

html {
  scroll-behavior: smooth;
}

具体的な実装方法

具体的な実装方法について解説していきます。

今回の方法ではHTML、CSSを書くだけで実装できます。jQueryは不要です。

HTMLを書く

まずはHTMLを書いていきます。
ポイントは以下の2点です。

<body>にid=”body”を付与
href=”#body”の<a>タグを設置

先ほどの例では、以下のようなコードにしています。

<body id="body">
（省略）
  <a class="pagetop" href="#body"><i class="fa-solid fa-angle-up"></i></a>
</body>

ちなみにボタンの中のアイコンはFont Awesomeを使用しています。
無料で複数のアイコンが使用できるのでおすすめです。

CSSを書く

次にCSSを書いていきます。

ポイントは先ほども書きましたが、下記のコードを入れることです。

html {
  scroll-behavior: smooth;
}

今までスルスル〜とした動きはjQueryでしか設定できませんでしたが、こちらのCSSでも設定できるようになりました。

動きのカスタマイズ方法

動作に関する要望で私がよく言われるものと、その対応方法についてまとめました。

フッター手前で追従を止めたい

最後まで画面右下に表示されていますが、フッターのテキストが見えないのでフッター手前で追従を止めたいという要望です。
position: sticky;で簡単に実装できます。

まずはHTMLの調整です。
ページトップボタンは<footer>の上に書くようにします。

<body id="body">
（省略）
  <a class="pagetop" href="#body"><i class="fa-solid fa-angle-up"></i></a>
<footer>
（省略）
</footer>
</body>

次にCSSを調整します。

.pagetop {
  position: sticky;
  bottom: 1rem;
  margin: 0 1rem 1rem auto;
}

position: sticky;を設定するとbottom、rightで設定した位置がズレるのでmarginで調整します。
marginで調整できるよう、displayにはflexを指定しています。

途中から表示

「ページトップボタンをちょっとスクロールしたところから表示したい。」
という要望です。
jQueryが必要になりますが、簡単に実装することができます。

まずはページトップボタンに以下のCSSを追加します。

.pagetop {
  opacity: 0;
  transition: opacity 0.3s ease;
}

jQueryのCDNを読み込み後、以下のコードを記述します。

$(function () {
  $(window).scroll(function () {
    var scrollPosition = $(window).scrollTop();
    if (scrollPosition >= 400) {
      $(".pagetop").css("opacity", "1");
    } else {
      $(".pagetop").css("opacity", "0");
    }
  });
});

これで、400pxスクロールしたらページトップボタンが表示されます。
表示するスクロール量は適宜調整して下さい。

速度を変える

「スルスル〜という動きをもっと早く（遅く）したい」
という要望です。

CSSのscroll-behavior: smooth;ではスクロールの速度は調整できません。

なのでこの場合は、jQueryでスルスル〜という動きを設定します。
具体的には以下のコードです。

$(function () {
  var urlHash = location.hash;
  if (urlHash) {
    $("body,html").stop().scrollTop(0);
    setTimeout(function () {
      var target = $(urlHash);
      var position = target.offset().top;
      $("body,html").stop().animate({ scrollTop: position }, 500);
    }, 100);
  }
  $('a[href^="#"]:not(no-scroll)').click(function () {
    var href = $(this).attr("href");
    var target = $(href);
    var position = target.offset().top;
    $("body,html").stop().animate({ scrollTop: position }, 500);
    return false;
  });
});

500の部分がスクロール移動の速度です。0.5秒かけて移動する設定になっています。
ここの数値は適宜変更して下さい。

おわりに

ページトップボタンの実装方法について解説しました。

基本的な実装はHTMLとCSSのみでできますが、細かい部分のカスタマイズにはjQueryが必要です。

今までは動作の実装にjQueryが必須でしたが、CSSのみでできるようになりました。
時代の変化を感じますね。

実装後に動作修正が入るかもしれないので、<footer>の上、または中にページトップボタンを入れるのがおすすめです。

ぜひ試してみて下さい。

URLをコピーしました！