スクロールに追従する「トップへ戻るボタン」を作成する方法

こんにちは、koheiです。

今日は、久しぶりにjQueryネタです。
最近のWebサイトでよく見るスクロールに追従する「トップへ戻る」ボタンの作成方法をご紹介します。

「トップへ戻る」ボタンの配置

まずは、htmlファイルもしくは、phpファイルに「トップへ戻る」ボタンを配置しましょう。
私はWordPressを使用しているので、footer.phpに記載しました。

【footer.php】

<div class="page-top">
    <img src="<?php echo get_template_directory_uri();?>/images/page_top.gif" alt="ページトップボタン">
</div>

ボタン全体をclass名“page-top”というdiv要素で囲みます。
ボタンは、page_top.gifという画像を配置してます。（別に文字列でも構いません。）

ボタンのCSS設定

次にCSSを以下のように設定します。

【style.css】

/* ページトップボタン */
.page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 99;
}

ポイントは、position:fixedを指定することです。
これで、ページがスクロールされても同じ場所に配置されます。
位置は、right,bottomなどで、ちょうどよい場所に配置してください。
z-indexは重なり順です。最前面に表示させるため、99を指定しています。

jQueryの実装

jQueryは以下のように実装します。

【my_script.js】
※WordPressのjQueryスクリプトでは、他のパッケージとの競合を防ぐ為、$マークをjQueryに書き換えています。

jQuery(function(){

  /* TOP-Pageボタン制御 */
  var topBtn = jQuery('.page-top');
  topBtn.hide();
  //スクロールが100に達したらボタン表示
  jQuery(window).scroll(function () {
      if (jQuery(this).scrollTop() > 100) {
          topBtn.fadeIn();
      } else {
          topBtn.fadeOut();
      }
  });
  //スクロールしてトップ
  topBtn.click(function () {
      jQuery('body,html').animate({
          scrollTop: 0
      }, 500);
      return false;
  });
}

５行目でまずは、TOPへ戻るボタンを非表示にしています。
7行目〜13行目は、スクロール量が100に到達したら、ボタンを表示させ、スクロール量が100より小さい場合は、非表示にしています。
15行目以降は、トップへ戻るボタンをクリックした時に、トップ位置まで移動させる処理です。
トップへ戻すスピードは、１８行目の数値で調整します。（上記は、500msecを指定しています）

最後に

いかがでしょう？
縦長のサイトなどは、トップへ戻るボタンが追従してくれるととても便利ですよね。
ぜひ活用してみてください！！

それでは！