【jQuery】画面の座標,高さ,スクロール位置をリアルタイムに取得

今回は画面のスクロール位置や座標の色々な取得方法をご紹介します。

ページの左上にスクロールやマウスカーソルを動かしたり、クリックしたりするとリアルタイムに表示されます(*^^)v

それではいってみましょう！

➀ページ（HTML）の高さ

ページ左上の赤➀の値です。

サイト全体の高さ（長さ）です。

【構文】

$(document).innerHeight();

➁ウィンドウ（ブラウザ）の高さ

ページ左上の水色➁の値です。

ウィンドウ（ブラウザ）の高さ（長さ）です。

【構文】

$(window).innerHeight();

➂要素の座標取得（offset）

ページ左上の黄緑➂の値です。

【構文】

ブラウザの上を基点として、黄緑のボックスの左上までの値です。

$(“セレクター”).offset().top

ブラウザの左を基点として、黄緑のボックスの左上までの値です。

$(“セレクター”).offset().left

【参考ページ】

offsetメソッドで座標の取得と設定

➃スクロールTOP位置取得

ページ左上の黄色➃の値です。

ブラウザの最上部の値をリアルタイムに取得しています。

【構文】

$(window).scrollTop();

【参考ページ】

Window（画面ブラウザ）のスクロール位置を取得する

➄スクロール最下部取得

ページ左上の紫➄の値です。

ブラウザの最下部の値をリアルタイムに取得しています。

スクロールで一番下にページをもっていくと0pxになります。

ページ最下部 = ページの高さーウィンドウの高さースクロールTOP

【参考ページ】

スクロールでページの一番下の値をリアルタイムに取得

➅ブラウザのマウスカーソルの位置座標

ページ左上のオレンジ➅の値です。

リアルタイムにマウスカーソルの座標を取得しています。

【参考ページ】

座標をリアルタイム表示（mousemove）

➆ブラウザのマウスクリックの位置座標

ページ左上のグレー➆の値です。

ブラウザのクリックした場所の座標を取得しています。

【参考ページ】

クリックした場所の座標を取得する

まとめ

言葉で説明するより画面でリアルタイムで見た方が分かりやすいと思い作成してみました(*^^)v

以上です。

JavaScript/jQuery

JavaScript/jQuery目次