blog

トップ  コーディング  【初心者向け】ページトップへ戻るボタンの作り方

【初心者向け】ページトップへ戻るボタンの作り方

コーディング 2022.08.25

サイトを閲覧していると、一気にぺージ内の上部に移動させたい！というとき、ありますよね。
そんなとき、ページトップへ戻るボタンがあると非常に便利です。
今回は、基本的な「ページトップへ戻る」ボタンの作り方について、解説していきます。

コンテンツ

ページトップへ戻るボタンのサンプル
まとめ

ページトップへ戻るボタンのサンプル

See the Pen
Untitled by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.

まずはサンプルを見て、実際にスクロールしてみてください。
ある程度スクロールするとボタンが表示されます。
ボタンをクリックするとページトップに移動し、ボタンは非表示になる仕様です。

HTML

<!-- ページトップへ戻るボタン -->
<div class="page-top">
  ページトップへ戻る
</div>

CSS

/* ページトップへ戻るボタン */
.page-top {
  display: none;/* 非表示 */
  position: fixed;/* ページ右下に固定 */
  right: 20px;
  bottom: 20px;
  padding: 20px 10px;
  border-radius: 8px;
  background-color: red;
  color: #fff;
  cursor: pointer;/* カーソルをポインターに */
}
/* activeクラスが付与されたとき */
.page-top.active {
  display: block;
}
/* ホバーしたとき */
.page-top:hover {
  opacity: 0.8;
  transition: 0.3s;
}

jQuery

jQueryでやることは主に３つです。

変数の宣言
スクロールイベントの実装
ページトップへ戻るボタンをクリックしたときの処理

変数の宣言

// 変数pagetopの宣言
  var pagetop = $('.page-top');

$('.page-top')は何回か使用するので、変数を宣言します。
変数の宣言をしておくと、.page-topクラスの名前を変更することになった際、変更箇所が一か所で済みます。

スクロールイベントの実装

// スクロールイベント
  $(window).on('scroll', function() {//スクロールしたとき、
    if ($(this).scrollTop() > 500) { //スクロール量が500px以上なら、
      pagetop.addClass('active');    //activeクラスを付与し、
    } else {                         //500px未満なら、
      pagetop.removeClass('active'); //activeクラスを外します。
    }
  });

スクロールしたときの処理を実装します。
コードの説明は上記コメントアウトをご覧ください。

$(this).scrollTop()で、ページ上部から現在のスクロール地点までの距離を取得できます。
console.log()を使って、実際に確かめてみると良いでしょう。

ページトップへ戻るボタンをクリックしたときの処理

// ページトップへ戻るボタンをクリックしたとき
  pagetop.on('click', function() {
    $('html, body').animate (
      { scrollTop : 0 },
      400,
      'swing',
    );
    return false;
  });

ページトップへ戻るボタンをクリックしたら、ページトップへスムースにスクロールする処理を行います。
詳細は、スムーススクロールとは？CSS, jQueryで実装法を解説！をご覧ください。