質問: ### 前提・実現したいこと teratailでの投稿が初めてなので至らぬところがあるかと思いますが ご教示願いいたします。 HTMLとjQueryを用いて、規約を最終行までスクロールしたときに、規約の下にある 「同意する」ボタンを活性化する処理の実装を行っています。 具体的には、ブラウザの倍率を拡大・縮小した際に、最下部までスクロールできるように スクロールの位置が下部の5%以下に来た際にボタンが活性化する処理を行っています。 ### 発生している問題・エラーメッセージ 最下部までスクロールしてもボタンが活性化しない。 ### 該当のソースコード ``` 【index.php】 '; } ?> '; } ?> 同意しない 同意する ``` ``` 【style.css】 @charset "UTF-8" body { height:500px; width:700px; } #contents { padding-bottom: 30px; } #policy { height: 200px; width:150px; margin: 0 auto; overflow-y: scroll; } #buttons { width:200px; margin: 0 auto; } li { display: inline-block; list-style: none; } ``` ### 試したこと 以下のサイトを参考にしています。 リンク内容
回答: ``` $( function() { // これが無いとページ自体のロードを待たないことになり、イベント設定に問題がでる $(document).scroll(function() { // $('#policy')がスクロールしていないならdocumentでは? scrollHeight = $(this).height(); scrollPosition = $('#policy').height() + $(this).scrollTop(); // 元のコードを触るならこうなるかなと。 if ((scrollHeight - scrollPosition) / scrollHeight <= 0.05) { //スクロールの位置が下部5%の範囲に来た場合 $('#agree').removeAttr('disabled'); } }); } ); ``` **動くサンプル:**