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

著者:牧野健人

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

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

ページトップへ戻るボタンを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>bordertransformで傾けることでデザインしています。

JavaScript( jQuery)

$(function () {
  $("#js-pagetop").click(function () {
    $('html, body').animate({
      scrollTop: 0
    }, 300);
  });
  $(window).scroll(function () {
    if ($(window).scrollTop() > 1) {
      $('#js-pagetop').fadeIn(300).css('display', 'flex')
    } else {
      $('#js-pagetop').fadeOut(300)
    }
  });
});

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

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

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

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

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

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

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

  1. ページ表示時には非表示(A)
  2. スクロール開始時に表示(B)
  3. ページトップにいる時は非表示(C)

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

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

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

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

牧野健人

著者牧野健人

株式会社リラクス 代表取締役。マーケティング領域におけるクリエイティブ改善を専門としながら、アクセス解析やSEOの知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。

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

お気軽にご相談ください

Webサイトに関する課題をお持ちの方はお気軽にご連絡ください。
課題が曖昧な状態でのご相談でも大丈夫です。

改善点や競合との比較がわかる無料サイト診断 無料相談・お問い合わせ
改善点や競合との比較がわかる無料のサイト診断