【jQuery】自動スクロールの実装方法を解説！最下部への移動やアニメーション移動の作り方・効かない場合の対処法もご紹介
jQueryでページトップへ戻るボタンを作成したり、目次から見出しに移動させる機能を実装したりしたことはありますか。
スクロール関係のイベントやメソッドの使い方は実装ベースで覚えてしまっている方も多いのではないでしょうか。
自動スクロールとは
そもそもブラウザのスクロールとはどういう機能でしょうか。
当たり前に使っているので改めて説明して下さいといわれると難しいと思います。
本来のスクロールの意味
そもそも英語のscrollは巻物やヴァイオリンの頭部の渦巻状の部分という意味です。
外国の古い映画に出てくる巻かれた羊皮紙を見たことがある方もいるのではないでしょうか。
媒体がモニターになっても本質が変わっていないことが良く分かると思います。
ユーザーは巻紙を動かしながら書かれている文章を読むように、ブラウザ画面をマウスで動かしてコンテンツを見るのです。
ブラウザのスクロール
ブラウザのスクロールは表示されたWebページの上下左右方向への移動のことを指します。
以下は一般的なスクロールの方法です。
- マウスのホイールを上下させる
- マウスのホイールをクリックし動かす
- キーボードのPageUp・PageDownを押す
- キーボードのShift＋Space・Spaceを押す
これらの動作を行うとscrollイベントが発生します。
自動スクロールとは
上記の操作方法のうちマウスのホイールやキーボードを使用した操作では、いちいちユーザーが入力しなければなりません。
一方マウスのホイールをクリックした後、マウスを少し下にずらすと画面が勝手に一定の速度で下に移動していきます。
これが自動スクロールで実現したい動きです。
サンプルコード
解説するにあたりサンプルコードを用意しました。以降の説明のお試しやデバッグ用の雛形としてご利用下さい。
index.htmlにコピー＆ペーストしてブラウザで表示して下さい。jQueryのバージョンは3.4.1です。
div#contentの高さを1000pxにしてありますので、足りない方は増やすなりブラウザサイズを変更するなりして下さい。
- <!DOCTYPE html>
- <html lang=”en”>
- <head>
- <meta charset=”utf-8″ />
- <title>jQueryで自動スクロール</title>
- <script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
- <style type=”text/css”><!–
- div { width: 300%; }
- div#top { background: red; }
- div#content { height: 1000px; background: yellowgreen; }
- div#bottom { background: blue; }
- –></style>
- </head>
- <body>
- <div id=”top”>Top</div>
- <div id=”content”>Content</div>
- <div id=”bottom”>Bottom</div>
- <script>
- $(window).on(‘scroll’, function() {
- console.log(‘(%d, %d)’,$(window).scrollLeft(), $(window).scrollTop());
- });
- </script>
- </body>
- </html>
スクロール操作を行うとコンソールにスクロールされた座標が表示されます。
【基本】jQueryのscrollLeft・scrollTopメソッド
scrollLeft・scrollTopメソッドは移動位置の取得・設定が行えるメソッドです。
移動位置を取得する
具体的な書き方はサンプルコードを参照して下さい。
scrollLeftとscrollTopが表示するのは、対象のjQueryオブジェクトが左上から何px移動した場所にあるかです。
windowオブジェクトに使用されることが多いですが、overflow: scroll;が指定された要素に対しても用いることができます。
移動位置を設定する
scrollLeftとscrollTopは取得だけでなく設定も行えるメソッドです。
以下のコードはdiv#topをクリックすると「(600, 600)」の位置に移動し、コンソールログに座標を表示します。
- $(‘#top’).on(‘click’, function() {
- $(window).scrollTop(600);
- $(window).scrollLeft(600);
- console.log(‘(%d, %d)’,$(window).scrollLeft(), $(window).scrollTop());
- });
【基本】jQueryのscrollイベント
jQueryのscrollイベントにはデータとハンドラの指定が可能です。
- .scroll([eventData], handler)
既にサンプルコードで使用しています。eventDataを指定した例は以下です。
- $(window).on(‘scroll’, { text: ‘Scroll!’ }, function(event) {
- console.log(event.data.text);
- });
scrollもoverflow: scroll;が指定された要素であればwindowオブジェクト以外にも適用できます。
【基本】jQueryのanimateメソッド
jQueryのスクロール関連のイベント・メソッドに関する整理は以上で終了です。次はアニメーションについて見ていきましょう。
animateメソッドとは
animateメソッドはjQueryオブジェクトに対して、CSS3プロパティを適用し、アニメーション効果を実行するものです。
- .animate(properties[, duration][, easing][, complete])
このメソッドによりゆっくりスクロールしたり、要素の大きさや色を変更したりといった、様々な変化を与えることができます。
4つの引数
animateは4つの引数を持つメソッドです。例えば以下のように指定します。
- $(‘#content’).on(‘click’, function() {
- $(this).animate(
- { height: ‘100px’ },
- 1000,
- ‘swing’,
- function() {
- console.log(‘Complete!’);
- },
- );
- });
properties（プロパティ）は適用するプロパティです。上記の例ではdiv#contentにheight: 100pxを適用します。
duration（動作時間）は全てのアニメーションを何ミリ秒で完了するかを指定する引数です。
easing（加減速効果）はアニメーションに対して加速や減速を行うことで、動きにバリエーションを付ける効果になります。
弾むような動きや最初・最後だけ遅くなる動きなど種類が豊富です。
complete（後処理）にはアニメーション終了後に実行する処理を指定できます。
【実践】最下部に移動するボタン
ここからは段階を追って最下部まで自動スクロールするボタンを作成しましょう。
まずは単純に最下部に移動するボタンです。
- <!– div#topを以下のように書き換え –>
- <div id=”top”>
- Top
- <button id=”bottomBtn”>最下部へ移動</button>
- </div>
- $(‘#bottomBtn’).on(‘click’, function() {
- $(‘html, body’).animate(
- { scrollTop: $(‘body’).get(0).scrollHeight },
- );
- });
$(‘body’).get(0).scrollHeightで移動距離を取得しています。既にそれらしい動きになってきました。
単純に最下部に移動するだけなら、このボタンで問題なさそうです。
【実践】自動スクロールする
divのCSSから高さ指定を、div#contentから高さ指定を削除し、好きな文章を貼り付けてみましょう。
速度が一定ではないようです。また今のままでは早すぎて文章が読めません。
animateメソッドのデフォルト値
animateメソッドのデフォルト値はduration: 400・easing: swingです。
このためプロパティを指定しただけで柔らかな動きをしてくれるようになります。
今の動きはswingという加減速を伴ったアニメーションです。最初と最後が緩やかに、途中は少し速くスクロールします。
アニメーションを調整する
linearという常に同じ速度でアニメーションを行うeasingに変更し、速度ももう少し遅くしましょう。
- $(‘#bottomBtn’).on(‘click’, function() {
- $(‘html, body’).animate(
- { scrollTop: $(‘body’).get(0).scrollHeight },
- 200 * 100 * 100,
- ‘linear’,
- );
- });
文章が上から下にゆっくりと流れていくようになります。このように簡単に自動スクロール機能が作れました。
自動スクロールが効かない原因
自動スクロールにはいくつかハマるポイントがあるので注意が必要です。ここによくある動かない原因をまとめます。
$(window)を指定している
windowオブジェクトにはscrollTopプロパティが存在しません。
このためanimateメソッドでプロパティを操作することはできず、厄介なことにコンソールにも表示されないようです。
代わりにサンプルコードの$(‘html, body’)などのHTML要素を指定して下さい。
視差効果を減らす
一部のブラウザや端末では負荷を軽減するために、アニメーション効果を減らす設定が存在します。
これが設定されているとanimateメソッドのアニメーションが動作しません。
例えばWindowsではパフォーマンスオプションで「Windows内のアニメーションコントロールと要素」のチェックが外れているなどです。
「コントロールパネル > システム > システムの詳細設定 > パフォーマンスの設定」で設定ウィンドウが開けます。
jQuery Easing Plugin
jQuery Easing Pluginはeasingの種類を増やすプラグインです。easingはデフォルトでlinear・swingの2種類だけしか使えません。
easingの一覧サイトには当たり前のように全てのeasingが網羅されていますが、これらはプラグインのeasingも含めたものです。
それ以前の問題
例えばスクロールバーが表示されないほど小さいコンテンツでは動作確認ができません。
またセレクタの指定に間違いがあり、動かそうとしていた要素とは異なるものが動作していたということもあります。
上記のサンプルコードではscrollTopに指定する値が正しく取得できていなければ、きちんと最下部までスクロールしないでしょう。
jQuery開発における問題対処法
jQueryでanimateメソッドの修正を行っていると、段々コードや頭の中が混乱してきて何を書いているのか分からなくなることがあります。
コンソールにエラーが出るものの、何が原因でこのような出力になったのか皆目見当がつかないというケースです。
いくつか取れる対処方法を紹介します。
シンプルなファイルで試す
本記事で紹介したサンプルコードを元にして下さい。その場合、jQueryのバージョンだけは自分が開発しているものと一致させます。
雛形の<body>タグ内のHTMLソースコードや、<script>タグ内のJavaScriptコードは消してしまって構いません。
このまっさらな状態から自分がさせたい動きを実装していきます。
jQueryを開発で使用していると様々なコードが存在するため、原因の切り分けの難易度が上がるのが原因です。
まずはその他の原因を取り除き、シンプルなファイルで試します。
エラーメッセージで検索する
一般的で当たり前の方法ですが最も効果的です。単純に「jQuery animate 動かない」で検索をかけるより近道になります。
できれば米Googleを使うなど、英語の検索結果が出てくる検索エンジンを利用するのが良いでしょう。
Stack Overflowであれば必ず誰かが同じ質問をしています。大体エラーメッセージで引っかかるのでおすすめです。
おわりに
上記のような対処方法を試し、デバッガやコンソールでステップ実行をしても分からないケースはそうそうないと思います。
思いますが開発者も人間ですので、実はタイポが原因でしたというどうしようもないおオチが付くこともあるというのが実際のところです。
あまりにも時間がかかるようなら誰かに聞くか、チェックしてもらうのが早かったりします。
scrollイベントもanimateメソッドも基本さえ押さえてしまえば、然程難しいものではありません。
この記事で最低限は押さえられている筈なので、あとは実践あるのみだと思います。
まずはサンプルコードを修正しながら様々な動きに挑戦してみましょう。
SHIFTフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。
エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。
