どうも7noteです。再生停止ボタン付き画面の自動スクロール機能の実装方法

jQueryを使った、画面の自動スクロールを作っていきます。
シンプルな機能ですが、再生停止を操作できるような作りなので、サイトをみた人が自分で自動スクロールさせるかどうかを決めることができます。

画面自動スクロールの作り方

index.html

<divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="btn"id="stop">STOP!</div><divclass="btn"id="start">START!</div>

style.css

.box{width:100%;/* 横幅いっぱい */height:100px;/* 高さを300pxに指定 */background:#aaa;/* 背景色を灰色にする */margin:50px0;/* 上下に適度な余白 */position:relative;/* 相対位置の設定 */}.btn{color:#FFF;/* 文字色を白に指定 */width:80px;/* 適当な大きさに指定 */height:80px;/* widthと同じ高さを指定 */text-align:center;/* 文字を中央揃えにする */line-height:80px;/* 行間を高さと一緒にして上下中央に文字を配置 */border-radius:50%;/* 角丸で円形にする */position:fixed;/* 絶対位置に指定 */right:10px;/* 画面の右から10pxの位置に指定 */bottom:10px;/* 画面の下から10pxの位置に指定 */cursor:pointer;/* ホバー時のカーソルを指の形にする */}/* スタート、ストップのボタンの色指定 */#start{background:#6c6;}#stop{display:none;/* stopははじめ非表示に指定 */background:#f66;}#start:hover{background:#8e8;}#stop:hover{background:#f99;}

script.js

// 初期値を設定varspeed=1;//スクロール量（1 = 1px）varinterval=50;//スクロール間隔（1000 = 1秒）varscrollTop=$(window).scrollTop();// 現在のスクロール量を計測// スタートボタンがクリックされた時$('#start').off('click');// on clickの重複防止のため$('#start').on('click',function(){/* スタートボタンを非表示にして、再生ボタンを表示 */$(this).hide();$('#stop').show();varscroll=scrollTop+speed;// 次の移動先までの距離を指定varscroll=setInterval(function(){window.scrollBy(0,scroll);// スクロールさせる$('#stop').off('click');// on clickの重複防止のため//スクロール中に停止ボタンが押された時$('#stop').on('click',function(){clearInterval(scroll);// setIntervalの処理を停止$(this).hide();// 停止ボタンを非表示にして、$('#start').show();// 再生ボタンを表示});},interval);// setIntervalを変数intervalの間隔で繰り返す。});

解説

大きく分けると2つのプログラムが動いています。
自動スクロールを行う部分と、その自動スクロールをボタンで制御する部分に分かれており、これらのプログラムの動作の順序を整理して1つのjavascriptにしているようなイメージです。

流れを書くと、

①再生ボタンを押す
②自動スクロールが始まり、ボタンが停止ボタンに切り替わる
③停止ボタンを押す
④自動スクロールを停止させ、ボタンが再生ボタンに切り替わる

これを繰り返している状態です。

まずはじめはスクロールがされていない状態です。このときに初期値が設定されます。
次に再生ボタンが押された場合、という処理を書きます。on()メソッドを使い処理を書いています。
ボタンが押されたら、ボタンの表示を切り替えたのち、自動スクロールを始めます。
自動スクロールの処理はsetInterval()をつかっており、これは処理を一定速度で繰り返すことができます。これを使い０.X秒ごとにXpxうごかすという処理を連続して行うことで自動スクロールが行われているような状態になります。
そして、自動スクロールを起こしているsetInterval()を無効化させるにはストップボタンを押します。ストップボタンが押された場合、ボタン表示を切り替えつつclearInterval()を使うことでsetInterval()の処理を停止させることができます。