Chapter04 スクロールの操作

概要と目標 スクロールに関するメソッドで、
よく見る機能を作ろう。

jQueryのスクロールに関するメソッドを知り、スムーズスクローラーを作りましょう。

今回のゴール

RERUN

新しいウインドウで表示する

スクロールイベントスクロールするたびに、何かする。

scroll() メソッドを使えば、
スクロールするごとにイベントを発生させる事ができる。

scroll（スクロール）() ・・・ スクロールイベント
$(セレクタ).scroll(function() {
  // スクロールするたびに実行する処理

});

詳細はjQuery API Documentationを参照

スクロールイベントを使ってみよう。

  1. 「chapter04」 › 「scroll」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
  2. 「chapter04」 › 「scroll」フォルダ内の「app.js」をテキストエディタで開く
  3. 下記のjQueryを追記
chapter04/scroll/app.js
$(function () {
  // scroll() ・・・ スクロールイベント
  $(window).scroll(function () {
    // スクロールするたびに実行する処理
    console.log('スクロールしたよ！');
  });
});
  1. 上書き保存
  2. ブラウザで「chapter04」› 「scroll」フォルダ内の「index.html」をブラウザで表示
  3. スクロールするたびにコンソールに文字列が出力されるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

スクロール量の変更と取得スクロール系の機能を作る上で、
欠かせない存在。

現在のスクロール量を取得したり、変更したりするには、
scrollTop() メソッドを利用する。

scrollTop（スクロールトップ）() ・・・ スクロール量を変更したり取得したりする
$(セレクタ).scrollTop(スクロール量);
                        省略可


【スクロール量】を省略すると現在のスクロール量を取得できる

詳細はjQuery API Documentationを参照

scrollTop()メソッドを使ってみよう。

  1. 「chapter04」 › 「scroll」フォルダ内の「app.js」をテキストエディタで開く
  2. 下記のjQueryを追記
chapter04/scroll/app.js
$(function () {
  // scroll() ・・・ スクロールイベント
  $(window).scroll(function () {
    // スクロールするたびに実行する処理
    console.log('スクロールしたよ！');

    // scrollTop ・・・ スクロール量を変更したり取得したり
    var scroll = $(window).scrollTop(); // 取得
    $('.fixed-panel').text(scroll + 'px');
  });
});
  1. 上書き保存
  2. ブラウザで「chapter04」› 「scroll」フォルダ内の「index.html」をブラウザで表示
  3. スクロール量が取得できているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

スクロール量によって処理を変えてみよう。

近年スクロールに応じて、CSSを変更するデザインが流行っている。
基本的には、このスクロール量によって処理を分岐している。

  1. 「chapter04」 › 「scroll」フォルダ内の「app.js」をテキストエディタで開く
  2. 下記のjQueryを追記
chapter04/scroll/app.js
$(function () {
  // scroll() ・・・ スクロールイベント
  $(window).scroll(function () {
    // スクロールするたびに実行する処理
    console.log('スクロールしたよ！');

    // scrollTop ・・・ スクロール量を変更したり取得したり
    var scroll = $(window).scrollTop(); // 取得
    $('.fixed-panel').text(scroll + 'px');

    // 1000px以上スクロールしたら、bodyにclassを追加
    if (scroll > 1000) {
      $('body').addClass('is-over');
    }
  });
});
  1. 「chapter04」 › 「scroll」フォルダ内の「style.css」をテキストエディタで開く
  2. 下記のCSSを追記
chapter04/scroll/style.css
body {
  transition: all .3s ease-in-out;
}

.is-over {
  background-color: #333;
  color: #ccc;
}

.fixed-panel {
  position: fixed;
  right: 0;
  bottom: 1em;
  padding: 1.5em;
  background-color: #212121;
  box-shadow: 0 0 4px rgba(0, 0, 0, .3);
  color: #ccc;
  text-align: right;
  font-weight: bold;
}
  1. 上書き保存
  2. ブラウザで「chapter04」› 「scroll」フォルダ内の「index.html」をブラウザで表示
  3. スクロール量が大きくなるとCSSが変更されるかをチェック
ブラウザでの表示例

RERUN

新しいウインドウで表示する

シュルシュルページトップボタンよく見かけるシュルシュル動く
このページの先頭へボタン。

scrollTop()の値は、前回紹介したanimate()メソッドで指定することもできる。
ただし、animate()メソッドに、scrollTopを指定する際は、ブラウザによって対応するセレクタが異なる。

scrollTop()を使う対象要素
ブラウザ html body
IE 8~11 ○ -
Edge - ○
Chrome 61 ○ -
Firefox 48 ○ -
Opera 48 ○ -
Safari 9 - ○

※.バージョンによっても異なる

シュルシュル動く
ページトップボタンを作ってみよう。

  1. 「chapter04」 › 「smooth-scroll」フォルダ内の「app.js」をテキストエディタで開く
  2. 下記のjQueryを追記
chapter04/smooth-scroll/app.js
$(function () {
  $('.js-button').click(function () {
    $('html, body').animate({
      scrollTop: 0
    }, 500);

    return false;
  });
});
  1. 上書き保存
  2. ブラウザで「chapter04」› 「smooth-scroll」フォルダ内の「index.html」をブラウザで表示
  3. 先頭までシュルシュル動くかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

シュルシュルページ内リンクよく見かけるシュルシュル動く
ページ内リンクに変更しよう。

先程の「このページの先頭へボタン」は、ページの先頭にしかシュルシュルしない。
先程のコードを変更し、どのページ内リンクでもシュルシュルするようにする。
ページ内の目的地の位置を取得するには、offset()メソッドで取得する。

offset（オフセット）() ・・・ 要素の表示位置を変更したり取得したりする
$(セレクタ).offset({top: topの座標位置, left: leftの座標位置});
                              省略可

パラメータを省略すると現在の表示位置を取得できる

詳細はjQuery API Documentationを参照

シュルシュル動く
ページ内リンクを作ってみよう。

  1. 「chapter04」 › 「smooth-scroll」フォルダ内の「index.html」をテキストエディタで開く
  2. body要素にid属性と、h1要素の下にページ内リンクのナビゲーションを追加
chapter04/smooth-scroll/index.html
<body id="top">
  <h1>シュルシュル動くボタン</h1>
  <nav>
    <ul>
      <li><a href="#sec1">第1章</a></li>
      <li><a href="#sec2">第2章</a></li>
      <li><a href="#sec3">第3章</a></li>
      <li><a href="#sec4">第4章</a></li>
      <li><a href="#sec5">第5章</a></li>
    </ul>
  </nav>
  1. 「chapter04」 › 「smooth-scroll」フォルダ内の「app.js」をテキストエディタで開く
  2. ページの先頭に戻るコードをコメントにし、下記のjQueryを追記
chapter04/smooth-scroll/app.js
$(function () {
  // $('.js-button').click(function () {
  //   $('html, body').animate({
  //     scrollTop: 0
  //   }, 500);

  //   return false;
  // });

  $('a[href^="#"]').click(function () {
    // 「a要素のhref属性が # から始まる要素」をクリックした時

    // 目的地の取得（自身のhref属性を取得）
    var id = $(this).attr('href');

    // 目的地の位置を取得
    var target = $(id).offset();
    // console.log(id);

    // html要素とbody要素にアニメーション
    $('html, body').animate({
      scrollTop: target.top // 目的地の上からの位置
    }, 500);

    return false;
  });
});
  1. 上書き保存
  2. ブラウザで「chapter04」› 「smooth-scroll」フォルダ内の「index.html」をブラウザで表示
  3. ページ内リンクがシュルシュル動くかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 今回の理解度をチェック。

「chapter04」 › 「training」フォルダ内の「index.html」を開き、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

    • ファイル名： app.js
    • class属性やID属性を任意で設定してOK
    • CSSを追加で設定してOK
解答例
chapter04/training/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題4</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="container">
      <h1>練習問題4</h1>
    </div>
    <!-- /.container -->

    <nav class="js-fixedNav global-nav">
      <div class="container">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <!-- /.container -->
    </nav>
  </header>

  <main>
    <div class="container">
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
      <hr>
      <p>
        これは、高さを稼ぐだけのテキスト。<br>
        なぜなら、高さが無いとスクロールが出来ないから。
      </p>
    </div>
    <!-- /.container -->
  </main>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>
</html>
chapter04/training/style.css
body {
  margin: 0;
  background-color: #eee;
}

.container {
  margin: 0 auto;
  width: 960px;
}

header {
  background-color: #fff;
}

header h1 {
  margin: 0;
  padding: .75em 0;
  font-size: 1.5em;
}

.global-nav {
  background-color: #333;
}

.global-nav ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.global-nav li {
  float: left;
  width: 25%;
}

.global-nav a {
  display: block;
  padding: 1em;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.is-fixed {
  padding-top: 3.5em;
}

.is-fixed .global-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

main {
  padding: 4em 0;
}
chapter04/training/app.js
$(function () {
  // ナビゲーションの位置を取得
  var nav = $('.js-fixedNav').offset();
  // console.log('ナビの位置は' + nav.top);

  // スクロールイベント
  $(window).scroll(function () {
    // スクロールする度に実行される
    // console.log($(window).scrollTop());

    if ($(window).scrollTop() >= nav.top) {
      $('body').addClass('is-fixed');
    } else {
      $('body').removeClass('is-fixed');
    }
  });
});

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ スクロールの操作を覚えると、
よく見る機能が作れる。

スクロールイベントを使って、スクロール量を取得するような処理は、
非常によく使うので抑えておきましょう。

  • scroll()メソッドでスクロールイベントを指定できる
  • scrollTop()メソッドでスクロール量を取得できる
  • offset()メソッドで要素の表示位置を取得できる