画面のスクロール時に伴う様々な動作を実現するための、jQueryのscrollイベントおよびscrollTopメソッドの基本的な説明をします。
スポンサーリンク
scrollイベントによって、要素がスクロールされているかどうか検知することができます。その際に、scrollTopメソッドによってどのくらいの距離がスクロールされているのかを取得することができます。
下記のデモ画面では、画面をスクロールさせると、そのスクロールさせた距離の数値をオレンジ色の領域に表示させるようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>スクロール</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> *{margin:0;} #sample1{height:500px; width:300px; background:green;} #sample2{height:500px; width:300px; background:orange;} #sample3{height:500px; width:300px; background:red;} </style> <head> <body> <div id="sample1"></div> <div id="sample2"></div> <div id="sample3"></div> <script> $(function(){ $(window).on('scroll', function(){ const scrollTop = $(window).scrollTop(); $('#sample2').text(scrollTop); }); }); </script> </body> </html> |
26行目
画面がスクロールすることを検知しています。$(window)はブラウザのウィンドウを指すオブジェクトです。
27行目
scrollTopメソッドでウィンドウがスクロールされた距離を取得しています。緑色の要素（<div id=”sample1″></div>）の高さを500pxに指定しているので、画面をちょうど500pxスクロールさせた時に、その緑色の領域が隠れるようになっています。
次のデモ画面では画面を200pxよりも多くスクロールさせた時に、緑色の領域を青色に変化させています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>スクロール</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> *{margin:0;} #sample1{height:500px; width:300px; background:green;} #sample2{height:500px; width:300px; background:orange;} #sample3{height:500px; width:300px; background:red;} </style> <head> <body> <div id="sample1"></div> <div id="sample2"></div> <div id="sample3"></div> <script> $(function(){ $(window).on('scroll', function(){ const scrollTop = $(window).scrollTop(); $('#sample2').text(scrollTop); if(scrollTop>200){ $('#sample2').css('background','blue'); }else{ $('#sample2').css('background','orange'); } }); }); </script> </body> </html> |
30〜34行目
変数scrollTopにはウィンドウがスクロールした距離が格納されているので、200pxで分岐させて要素の色を変更しています。このようにして、スクロールの距離に応じて、ある要素に対して様々な挙動の変化や動作を追加していくことが可能です。
上記までの説明においてscrollTopメソッドには引数を指定していませんでしたが、引数として数値を指定すると、その位置まで移動することができます。下記デモ画面では、赤い領域にあるボタンをクリックするとスクロール距離が0（ゼロ）になるように設定しています。つまり画面をスクロールする前の状態（位置）にしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>スクロール</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> *{margin:0;} #sample1{height:600px; width:300px; background:green;} #sample2{height:600px; width:300px; background:orange;} #sample3{height:600px; width:300px; background:red;} </style> <head> <body> <div id="sample1"></div> <div id="sample2"></div> <div id="sample3"><button id="button">移動する</button></div> <script> $(function(){ $('#button').on('click', function(){ $(window).scrollTop(0); }); }); </script> </body> </html> |
関連ページ
スクロールしてページの最下部で処理をする[scroll][jQuery]
