【jQuery】もはや常識？！ページトップボタンを実装しよう！

jQueryを記述する

では、jQueryを記述していきましょう！

ページトップボタンのコード

完成形のコードです。

$(function() {
  let pagetop = $('#page-top');
  let speed = 500;
  
  // ボタンを非表示にする
  pagetop.hide();
  
  // 100pxスクロールしたらボタンが表示される
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      pagetop.fadeIn(); // ふわっと表示
    } else {
      pagetop.fadeOut(); // ふわっと非表示
    }
  });
  
  // クリックしたらページトップへ移動する
  pagetop.click(function() {
    $('html, body').animate({scrollTop: 0}, speed);
    return false;
  }); 
});

実行予約$(function(){})

{}の中にjQueryのコードを書いていきます。

$(function() {
// jQueryを記述
});

スムーススクロールを既に作成していましたら、同じ$(function(){})が使えますので、スムーススクロールのコードに下に記述していきましょう。

変数を宣言する

「pagetop」と「speed」の変数を宣言します。

「pagetop」にはHTMLファイルに記述したID名を指定します。

ここでは、<div>タグのID名となります。

　let pagetop = $('#page-top');
  let speed = 500;

ボタンを非表示にする

ページをスクロールしていない時は、ボタンは隠しておきましょう。

非表示は簡単で、「セレクタ.hide()」と記述するだけです。

  // ボタンを非表示にする
  pagetop.hide();

「変数pagetopを非表示」にします。

【イベント】scroll()

スクロールはブラウザ画面に対してなので、セレクタがwindowになります。

「$(window).scroll(function(){})」の{}の中にjQueryのコードを記述していきます。

// 100pxスクロールしたらボタンが表示される
$(window).scroll(function() {
　// スクロール時の処理
});

100pxスクロールしたらボタンがふわっと表示される

  if ($(this).scrollTop() > 100) {
      pagetop.fadeIn(); // ふわっと表示
    } else {
      pagetop.fadeOut(); // ふわっと非表示
    }

「$(this).scrollTop()」がスクロールした距離を表し、「> 100」が100pxより大きいという意味なので、「if ($(this).scrollTop() > 100)」は「100pxよりもスクロールしたら」となります。

ふわっと表示には、「セレクタ.fadeIn()」を指定するだけ。

非表示の時もふわっと消えるようにしたいので、「セレクタ.fadeOut()」を指定します。

「100pxよりもスクロールしたら、ページトップボタンがふわっと表示される。そうでなければふわっと消える」の指定ができました！

【イベント】click()

「セレクタ.click(function(){})」の{}の中に記述していきます。

ページトップボタンをクリックした時なので、セレクタは変数pagetopになります。

  // クリックしたらページトップへ移動する
  pagetop.click(function() {
    // 処理を書く
    return false;
  });

スムーススクロール

クリックした時の動きは、スムーススクロールと時に出てきた「animate()」を使います。

 $('html, body').animate({scrollTop: 0}, speed);

1番目の引数であるプロパティの値は、topから0の位置＝一番上ですので、「{scrollTop: 0}」とします。

まとめ

よく見かけるけれど、自分でやるとなると意外とやっかいなページトップボタン。

いろんなやり方を試して、自分に合った方法を見つけてください。

See the Pen Untitled by spica (@spica_blog) on CodePen.

See the Pen Untitled by spica (@spica_blog) on CodePen.