スクロール位置の取得・設定・イベント
JQueryJQueryでスクロール位置を取得する方法を解説します。画面全体や特定の要素がどのスクロール位置にあるかを取得できます。
スクロール位置の取得
垂直方向のスクロール位置の取得
- JQuery
- COPY
var t = $(window).scrollTop();
水平方向のスクロール位置の取得
- JQuery
- COPY
var t = $(window).scrollLeft();
画面全体のスクロール位置を取得する場合、$(window)をセレクタにして、scrollTop()で垂直方向、scrollLeft()で水平方向のスクロール位置が取得できます。
また、divタグなどでスクロールができるような要素のスクロール位置を取得することもできます。$('#id')のようにIDなどをセレクタにすればスクロール位置を取得できます。
スクロール位置の設定
垂直方向のスクロール位置の設定
- JQuery
- COPY
$(window).scrollTop(100);
水平方向のスクロール位置の設定
- JQuery
- COPY
$(window).scrollLeft(100);
スクロール位置を設定するには、scrollTop()またはscrollLeft()にスクロール位置を引数で渡してあげます。
ページトップに戻るときやページ内リンクをおこなう場合などにスクロール位置を設定して移動することができます。ページ内リンクをアニメーションでおこなう方法は以下のページで解説していますので参考にしてみてください。
ページ内リンクをアニメーションでおこなう
スクロールイベント
- JQuery
- COPY
$(window).scroll(function() {
//スクロールしたときの処理
});
スクロールをしたときのイベントは、$(セレクタ).scroll(function() { 〜 });で検知できます。スクロールされた際になんらかの処理をおこないたい場合はこのイベントを使いましょう。