ページトップへ戻るボタンをjQueryで実装する方法【スムーススクロール】

2024/06/12 著者:牧野健人

ページトップへ戻るボタンを jQueryで実装する方法を解説します。

コピペOKなので、ぜひご活用ください。

株式会社リラクス代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

ページトップへ戻るボタンをjQueryで実装する方法

ページトップへ戻るボタンをjQueryで実装する方法

まず、完成系はデモページをご覧ください。

以下で、実装に使うHTML、CSS、jQueryのコードを解説します。

HTML

<button id="js-pagetop" class="pagetop"><span class="pagetop__arrow"></span></button>

ボタンの中の矢印の実装のために<span>を<button>の中に入れています。

CSS

.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #000;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
}
.pagetop__arrow {
  display: block;
  height: 10px;
  width: 10px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateY(20%) rotate(-45deg);
}

<button>はデフォルトではマウスオーバー時にカーソルがポインター型にならないのでcursor: pointer;を入れています。

矢印は<span>のborderをtransformで傾けることでデザインしています。

JavaScript（ jQuery）

$(function () {
  const $pageTop = $("#js-pagetop");

  $(window).scroll(function () {
    if ($(window).scrollTop() > 1) {
      $pageTop.fadeIn(300).css('display', 'flex');
    } else {
      $pageTop.fadeOut(300);
    }
  });

  $pageTop.click(function () {
    $('html, body').animate({ scrollTop: 0 }, 300);
  });
});

jQueryでは下記の2つの要素を実装しています。

クリックでページトップにスムーススクロールで移動する
ページトップではボタンを消す

クリックでページトップにスムーススクロールで移動する

スムーススクロールは、ページ内でユーザーを移動させる際に、一瞬で目的地に飛ばすのではなく、滑らかにスクロールさせる仕様のことです。

一瞬で目的地に飛ばしてしまうと、ユーザーが別ページに遷移したのか同じページの中で移動したのかわかりづらくなってしまうため、スムーススクロールを実装することは重要です。

本コラムの例では、 jQueryのanimate()メソッドを使用しています。第二引数の300は移動にかかる時間（ミリ秒）なので、値を小さくするほど早くスクロールします。

ページトップではボタンを消す

ページトップへ戻るボタンは、すでにページトップにいる時には必要ありません。そのため、下記の仕様を実装することが望ましいです。

ページ表示時には非表示（A）
スクロール開始時に表示（B）
ページトップにいる時は非表示（C）

これを実現するために、まずCSSでボタンにdisplay: none;をかけています（A）。

その上で、if ($(window).scrollTop() > 1) {}で「1pxでもスクロールしたら」という条件を設け、.fadeIn()メソッドでdisplay: none;を打ち消して表示させています（B）。引数は表示にかかる時間（ミリ秒）です。

また、今回の例ではボタンの中の矢印を中央に配置するために<button>にはdisplay: flex;を適用したいので、css()メソッドを併用しています。

そして、else{}で.fadeOut()メソッドを使うことで、ページトップにいる時にはボタンを非表示にしています（C）。