【jQuery】最後までスクロールしなければいけない利用規約を作成

はじめに

利用規約で、利用者が目を通した証拠になるように
下までスクロールしないと同意ボタンを押せない仕組みになっているものがあります。
今回はそのような仕組みを再現します。

手順

ボタンとテキストボックスを作成

まずは画像のように利用規約のテキストボックスと同意ボタンを用意します。

[テキストボックス]CSSは割愛

html

<div id="terms" class="box">
  <p>【利用契約条項】<br>
    利用規約の文章です<br>
    省略....
    ここで終わりです。<br>
  </p>
</div>

[ボタン]CSSは割愛

html

<a id="confirm-register" class="agree" disabled>同意する</a>

ボタンの属性をdisabledにする

ボタンの属性にdisabledをつけることによって、開いたときに使えない状態(画像では分かりやすくCSSで色を薄くしている)になっています。

ロジック説明

1. 全長を取得する
2. 表示領域 + スクロールした値 = スクロールした高さを取得
3. (全長 - スクロールした値) / 全長　を計算し、何％までスクロールしたかを取得する
4. disabled属性を削除する

Javascriptの作成

javascript

$(function() {
  $('#terms').bind('scroll', function() {
      //全長を取得
      scrollHeight = $('#terms').get(0).scrollHeight;
      //スクロールした高さを取得
      scrollPosition = $('#terms').height() + $('#terms').scrollTop();
      //スクロールの位置が下部何%の範囲に来た場合の処理(例:3%)
      if ((scrollHeight - scrollPosition) / scrollHeight <= 0.03) {
          $('#confirm-register').removeAttr('disabled');
      }
  });
});

完成

※　動作確認のためテストでgoogleに遷移させています

参考文献

ページの下までスクロールしたときに何らかの処理を実行する例