【初心者でもわかる】jQueryで作る「再生停止ボタン付き自動スクロール機能」

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

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

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

index.html

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

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

style.css

.box {
  width: 100%;        /* 横幅いっぱい */
  height: 100px;      /* 高さを300pxに指定 */
  background: #aaa;   /* 背景色を灰色にする */
  margin: 50px 0;     /* 上下に適度な余白 */
  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

// 初期値を設定
var speed = 1; //スクロール量（1 = 1px）
var interval = 50; //スクロール間隔（1000 = 1秒）
var scrollTop = $(window).scrollTop(); // 現在のスクロール量を計測

// スタートボタンがクリックされた時
$('#start').off('click');  // on clickの重複防止のため
$('#start').on('click', function(){
  
  /* スタートボタンを非表示にして、再生ボタンを表示 */
  $(this).hide();
  $('#stop').show();
  
  var scroll = scrollTop + speed; // 次の移動先までの距離を指定
  var scroll = 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()の処理を停止させることができます。

まとめ

onの処理だとクリックイベントが重複してしまうので、ofF()を使い重複対策をしています。
写真などをゆっくり眺めるようなサイトにはこういう自動スクロール機能とかがあってもいいかもしれませんね。

参考：https://ti-tomo-knowledge.hatenablog.com/entry/2018/05/08/083500

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ