「jQuery」を使用してページトップへ戻るボタンを制御する

2023年6月22日 2024年1月30日

Web Basic Archive

前回は基本編として、ページトップへ戻るボタンをHTMLとCSSで設置する手順をお伝えしましたが、今回は、ボタンの表示やスクロールスピードの制御を、jQueryで行う実用的な方法をご紹介します。

HTML・CSSのコーディング
jQueryで動きを制御する
- 表示の制御
  - jQueryの使用準備
  - Javascriptの記述
- スムーススクロールの制御
コードサンプル
参考にしたサイト

HTML・CSSのコーディング

ページトップへ戻るボタンのHTMLのマークアップと、CSSスタイリングを確認しましょう。

ボタン部分のHTMLは今回は、ボタン要素<button>で作成します。（div要素などでも問題ないです。）

<button id="topButton">Page Top</button>

ボタンを記述する場所としては、body要素の直下であればどこでもいいですが、footer要素の終わりからbody要素終了までの間に設置するといいと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>
</head>
<body>
    <header>
        ヘッダー要素
    </header>
    <main>
        メインコンテンツ
    </main>
    <footer>
        フッター要素
    </footer>

    <!-- ページトップへ戻るボタン -->
    <button id="topButton">トップへ</button>
    
</body>
</html>

CSSでボタンのスタイリングを行います。position : fixed; でスクロールしても位置が変わらないように固定して、ページの右下あたりに配置するのが定番です。また、初めは非表示にしておくので、display : none; を指定しておきます。

今回は、この記事のアイキャッチ画像にあるボタンのデザインを、CSSのみで作成したいと思います。

三角矢印部分は、疑似要素を使います。border-colorを2辺だけ表示させて、マイナスに４５度回転させることで表現しています。

/* ボタン本体 */
#topButton {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 70px;
  height: 70px;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  color: #CE5D8B;
  text-decoration: none;
  cursor: pointer;
}

/* 上三角矢印を疑似要素で作成 */
#topButton::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12.7px;
  margin-top: -12.7px;
  width: 18px;
  height: 18px;
  border: 4px solid;
  border-color: #CE5D8B #CE5D8B transparent transparent;
  transform: rotate(-45deg);
}

/* マウスオンしたら少し透明に  */
#topButton:hover {
  opacity: 0.75;
}

/* ボタン内の文字のスタイル */
#topButton span {
  display: block;
  font-size: 12px;
  margin-top: 22px;
}

jQueryで動きを制御する

ページトップへ戻るボタンで求められる動きの部分は、大きく分けて次の2点が考えられます。

初めは非表示で、ページをある程度スクロールしたら表示される。（表示の制御）
滑らかなスクロールで、ページトップへ移動する。（スムーススクロールの制御）

表示の制御

初めは非表示で、ページをある程度スクロールしたら表示されるように、Javascriptで設定していきましょう。今回は、Javascriptのライブラリ「jQuery」を使用して記述していきます。

ピュアなJavascriptではなく、jQueryを使用する理由としては、記述がシンプルになるということが大きいですが、後で設定するスムーススクロールの制御の部分が関係してきます。

まずは、表示のコントロールを設定していきましょう。

jQueryの使用準備

jQueryを使用するためには、HTMLのhead部分に、コードファイルを読み込んでおく必要があります。設定方法について詳しくは、こちらの記事で紹介しています。

さらに今回は、jquery-easingプラグインを使用して、スクロールの細かな動きを付けたいと思いますので、こちらもCDNで読み込ましておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>

　　<!--jQueryの読込-->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" 
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
   
   <!--jQuery easingプラグインの読込-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

   <!--作成するjavascriptファイルはプログラムファイルの後に記述する-->
   <script src="js/pagetop.js"></script>

</head>
<body>
    <header id="top">
        ヘッダー要素
    </header>
    <main>
        メインコンテンツ
    </main>
    <footer>
        フッター要素
    </footer>

    <!-- ページトップへ戻るボタン -->
    <a href="#top" id="topButton">トップへ</a>
    
</body>
</html>

Javascriptの記述

それでは、jQueryで設定していきましょう。

//表示の制御
   $(window).scroll(function () {
    if ($(this).scrollTop() > 200) {
      $('#topButton').fadeIn(300);
    } else {
      $('#topButton').fadeOut(300);
    }
  });

2行目：画面をスクロールしたら実行させたいので、$(window).scroll() でスクロールイベントを使用します。

3行目：.sctollTop()で指定要素のスクロールの縦の位置を取得。今回はwindowの上部の位置となります。if文で条件分岐、200px以上のスクロール量以上なら、

4行目：ページトップへ戻るボタンを .fadeIn() フェイドイン表示させます。（）の中の数字は、アニメーションさせる時間でミリ秒単位となります。

５、６行目：それ以外の条件ということなので、スクロール位置が上から200px以下なら、ページトップへ戻るボタンを .fadeOut() フェイドアウト表示。こちらも同様に（）内はアニメーション時間です。

スムーススクロールの制御

次に、スクロールアニメーションの動きを設定していきます。

jQueryを使用した理由のひとつとして、スクロールの細かな制御が行えるという点があります。ピュアなJavascriptや、CSSのscroll-behaviorでもスムーススクロールを設定することはできますが、スクロールする時間や、イージングの設定が簡単にできません。jQueryの.animate() メソッドで比較的容易に行えます。

  //スクロールの制御
  $('#topButton').click(function () {
    $('html, body').animate({
      scrollTop: 0
    }, 300,'easeOutQuart');
  });

２行目：ページトップへ戻るボタンをクリックした時にスクロールさせたいので、.click() クリックイベントを使用します。

３～５行目：一番大きな親要素のスクロールの縦位置をゼロとするアニメーションを行うことで、ページトップへ戻るスムーススクロールを実現させています。アニメーションの指定は、.animete() のアニメイトメソッドで、（）の中は、（アニメーションさせるプロパティ、duration、easing、関数）となります。

duration：アニメーション時間は300ミリ秒、easing：イージングは、jquery-easingプラグインを使用してeaseOutQuartを付けてみました。

ちなみに、アニメーションさせる要素が、html,bodyの２つ指定されている意味は、webkitが使えるブラウザとそうでないブラウザによって.animate()が効く要素が変わるからです。webkit … body要素、webkit以外 … html要素となるので、両方指定しているということになります。

コードサンプル

全体をまとめると次のようになります。イージングの動きや、表示するポジションなどサイトのイメージに合わせていろいろと調整してみてください。

See the Pen Untitled by web-basic-archive (@web-basic-archive) on CodePen.

ページトップへ戻るボタンの実装は他にも、ボタンをリンク要素<a>で作成する場合でも可能ですが、こちらは、スムーススクロールをページ以外にジャンプする場合に、少し複雑な設定が必要となりますので、次の機会にご紹介したいと思います。

参考にしたサイト

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

【CSS】CSSのみで三角と矢印を作る方法 - bagelee（ベーグリー）

【jQuery入門】easingの使い方とPluginの活用方法まとめ！

jQuery Easing - jQuery 日本語リファレンス

jQueryで「このページの先頭に戻る」ボタンなどでanimateを使っている場合、callback関数が2回呼ばれる問題を回避する方法

Follow me!

@webbasicarchive