Profile

【JQuery】コピペOK！スクロールしたら「ページトップへ戻る」を下から表示

【JQuery】少しスクロールしたら「ページトップへ戻る」ボタンが下から出てくる

画面を少しスクロールしたらページトップへ戻るボタンを下から出現させる方法。

目次

少しスクロールすると下から出てくるボタンのサンプル

サンプルは現在のページ右下のピンクのボタンの動きをご覧いただくか、サンプル用のページをどうぞ↓

サンプルページ【JQuery】コピペOK！スクロールしたら「ページトップへ戻る」を下から表示

サンプルページ【JQuery】コピペOK！スクロールしたら「ページトップへ戻る」を下から表示

コピペはこちらから

<!-- JQuery本体の読み込み（既に読み込んでいる場合は不要） -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content">メインコンテンツです</div>

<p class="pagetop">
  <a href="#">ページトップへ戻る</a>
</p>
$(window).scroll(function () {
  if($(window).scrollTop() > 500) {
    $('.pagetop').addClass('is-active');
  } else {
    $('.pagetop').removeClass('is-active');
  }
});

// ここから下はトップへ戻るボタンをクリックした時の動きをなめらかにする、
// スムーススクロールのコードです。必要であれば合わせてどうぞ
$('a[href^="#"]').click(function(){
  var speed = 400;
  var href= $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $('body,html').animate({scrollTop:position}, speed, 'swing');
  return false;
});

.content {
  height: 3000px;
}
.pagetop {
  position: fixed;
  right: 2.5%;
  bottom: -400px;
  transition: .3s ease-out;
}
.pagetop.is-active {
  bottom: 30px;
}

※「500px以上スクロールしたらボタンを表示」するコードのため、ある程度ページの長さがある状態でお試しください

【ざっくり解説】少しスクロールしたら何かするという仕組み

スクロール時に何かしたい時は、まずscroll()で囲む

$(window).scroll(function () {
  // 画面がスクロールされたら行いたいことをここに記述
});

「画面がスクロールされたら何かしらの処理をしたい」という場合はまず最初にこのように書きます。画面が1pxでもスクロールされたらその度に感知してくれるイメージ。

上からのスクロール位置を取得するにはscrollTop()

$(window).scroll(function () {
  // 画面がスクロールされた時の上からの位置（=スクロール量）を取得
  $(window).scrollTop()
});

scrollTop()は引数に数値を入れた場合はその位置までスクロールしてくれます。例えばscrollTop(300)にすると上から300ピクセルのところに移動。

そして引数を省略した場合は、今ページの一番上からどれぐらいの位置にいるか、つまり「ページの1番上からどれぐらいスクロールされたか」というスクロール量が取得できます。例えば上から300ピクセル分スクロールしたら300、1000ピクセル分スクロールしたら1000という値を取得。

scroll()の中にこれを記述することで「スクロールを行うたびに、現在のスクロール量を取得する」ことができるようになります。

if文で「スクロール量が500を超えたら」という条件を作る

$(window).scroll(function () {
  if($(window).scrollTop() > 500) {
    // スクロール量が500を超えたらしたいことを書く
  } else {
    // スクロール量が500未満の場合にしたいことを書く
  }
});

あとはこのscrollTop()を使ってif文を作ればOK。もし現在のスクロール量が500を超えたら○○して、それ以外（500未満）は△△するという分岐が出来ました。

ちなみに今回のサンプルでは、もし500を超えたら「is-active」というクラス名をつけてそれ以外の場合は「is-active」を外すというクラス名のつけ外しをおこなっています。

まとめ

ページトップボタン以外にも少しスクロールしたら何かしたいという場合に、今回のJQueryのコードは基本形として使えるので便利です。

関連記事