jQueryで最下部までスクロールしたときに「同意する」ボタンを活性化させたい

###前提・実現したいこと

teratailでの投稿が初めてなので至らぬところがあるかと思いますが
ご教示願いいたします。

HTMLとjQueryを用いて、規約を最終行までスクロールしたときに、規約の下にある
「同意する」ボタンを活性化する処理の実装を行っています。

具体的には、ブラウザの倍率を拡大・縮小した際に、最下部までスクロールできるように
スクロールの位置が下部の5%以下に来た際にボタンが活性化する処理を行っています。

###発生している問題・エラーメッセージ
最下部までスクロールしてもボタンが活性化しない。

###該当のソースコード

lang
1【index.php】
2<!DOCTYPE html>
3<html>
4	<head>
5		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6		<link rel="stylesheet" href="style.css" type="text/css">
7		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8		<script type="text/javascript">	
9			//$('#policy').bind('scroll', function() {
10			$('#policy').scroll(function() {
11				scrollHeight = $(this).height();
12				scrollPosition = $(this).height() + $(this).scrollTop();
13				
14				
15				if ((scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
16					//スクロールの位置が下部5%の範囲に来た場合
17					$('#agree').removeAttr('disabled');
18				}
19			});
20		</script>
21	</head>
22	<body>
23		<div id="contents">
24			<div id="hoge">
25				<?php
26					for ($x =1; $x < 100; $x++) {
27						echo 'テスト<br/>';
28					}
29				?>
30			</div>
31			<div id="policy">
32				<?php
33					for ($i = 1; $i <= 100; $i++) {
34						echo $i . '回目の繰り返し<br>';
35					}
36				?>
37			</div>
38			<div id="buttons">
39				<ul id="permission">
40					<li><button type="button" name="disagree">同意しない</button></li>
41					<li><button type="button" id="agree" name="agree" disabled="disabled">同意する</button></li>
42				</ul>
43			</div>
44		</div>
45	</body>
46</html>

lang
1【style.css】
2@charset "UTF-8"
3
4body {
5	height:500px;
6	width:700px;
7}
8
9#contents {
10	padding-bottom: 30px;
11}
12
13#policy {
14	height: 200px;
15	width:150px;
16	margin: 0 auto;
17	overflow-y: scroll;
18}
19
20#buttons {
21	width:200px;
22	margin: 0 auto;
23}
24
25li {
26	display: inline-block;
27	list-style: none;
28}

###試したこと

以下のサイトを参考にしています。
リンク内容

kei344

2017/01/09 13:57

質問文用の投稿テンプレートが残っています。不要な文言は削除されてはいかがでしょうか。

行動規範の内容に同意します

回答4件

ベストアンサー

JavaScript
1$( function() { // これが無いとページ自体のロードを待たないことになり、イベント設定に問題がでる
2            $(document).scroll(function() { // $('#policy')がスクロールしていないならdocumentでは？
3                scrollHeight = $(this).height();
4                scrollPosition = $('#policy').height() + $(this).scrollTop(); // 元のコードを触るならこうなるかなと。
5                if ((scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
6                    //スクロールの位置が下部5%の範囲に来た場合
7                    $('#agree').removeAttr('disabled');
8                }
9            });
10} );
11```**動くサンプル：**[https://jsfiddle.net/r0wuqgo9/](https://jsfiddle.net/r0wuqgo9/)

投稿2017/01/09 15:40

kei344

総合スコア69407

退会済みユーザー

2017/01/10 14:08 編集

お返事いただきありがとうございます。kei344さんのソースを元に1行目のfunction()を追記し修正したところなんとか動くものを作ることができました。リンクまで用意していただきありがとうございました。本回答をベストアンサーとさせていただきます。

行動規範の内容に同意します

回答いただきありがとうございました。
ご回答を参考にスクロールバーを最下部までスクロールした時に
ボタンを活性化する処理を実装することができました。

以下にソースコードを示します。
皆さんの参考に少しでも貢献できれば良いなと思います。

###ソースコード

lang
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5		<link rel="stylesheet" href="style.css" type="text/css">
6		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
7		<script type="text/javascript">	
8			$(function() { 	
9				$('#policy').bind('scroll', function() {			                       
10           //height()ではなく、.get(0).scrollHeightを指定することで
11                   //スクロールで隠れている部分も含めた全長を取得している
12					scrollHeight = $('#policy').get(0).scrollHeight;
13
14          //スクロールした高さを取得
15					scrollPosition = $('#policy').height() + $('#policy').scrollTop();
16	
17					//スクロールの位置が下部5%の範囲に来た場合の処理
18          //条件文ではdiv#policyの全長に対するスクロールバーの位置を割合で取得
19					if ((scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
20						$('#agree').removeAttr('disabled');
21					}
22				});
23			});
24		</script>
25	</head>
26	<body>
27		<div id="contents">
28			<div id="hoge">
29				<?php
30					for ($x =1; $x < 50; $x++) {
31						echo 'テスト<br/>';
32					}
33				?>
34			</div>
35			<div id="policy">
36				<?php
37					for ($i = 1; $i <= 100; $i++) {
38						echo $i . '回目の繰り返し<br>';
39					}
40				?>
41			</div>
42			<div id="buttons">
43				<ul id="permission">
44					<li><button type="button" name="disagree">同意しない</button></li>
45					<li><button type="button" id="agree" name="agree" disabled="disabled">同意する</button></li>
46				</ul>
47			</div>
48		</div>
49	</body>
50</html>