批評スクロール[scroll][scrollTop][jQuery]2017年7月29日JavaScript画面のスクロール時に伴う様々な動作を実現するための、jQueryのscrollイベントおよびscrollTopメソッドの基本的な説明をします。スポンサーリンクscrollイベントによって、要素がスクロールされているかどうか検知することができます。その際に、scrollTopメソッドによってどのくらいの距離がスクロールされているのかを取得することができます。下記のデモ画面では、画面をスクロールさせると、そのスクロールさせた距離の数値をオレンジ色の領域に表示させるようにしています。画面がスクロールすることを検知しています。$(window)はブラウザのウィンドウを指すオブジェクトです。27行目scrollTopメソッドでウィンドウがスクロールされた距離を取得しています。id=”sample1′′></div>)の高さを500pxに指定しているので、画面をちょうど500pxスクロールさせた時に、その緑色の領域が隠れるようになっています。次のデモ画面では画面を200pxよりも多くスクロールさせた時に、緑色の領域を青色に変化させています。変数scrollTopにはウィンドウがスクロールした距離が格納されているので、200pxで分岐させて要素の色を変更しています。このようにして、スクロールの距離に応じて、ある要素に対して様々な挙動の変化や動作を追加していくことが可能です。上記までの説明においてscrollTopメソッドには引数を指定していませんでしたが、引数として数値を指定すると、その位置まで移動することができます。下記デモ画面では、赤い領域にあるボタンをクリックするとスクロール距離が0(ゼロ)になるように設定しています。画面をスクロールする前の状態(位置)にしています。