jQueryでの位置の取得方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでの位置の取得方法について、簡単に解説していきます。

ドキュメントに対する位置

jQueryでも様々な位置を取得できます。

ドキュメントに対する位置はoffsetメソッドで取得できます。

var offset = $('#hoge').offset();
console.log(offset.top); // top
console.log(offset.left); // left

上記のコードの例では、offsetメソッドの戻り値のオブジェクトのtopやleftプロパティでhogeのidの要素のドキュメントでの位置の取得が可能です。

親要素に対する位置

親要素に対する位置はpositionメソッドで取得できます。

<div id="hoge_parent">
  <div id="hoge_child"></div>
</div>

例えば、hoge_parentとhoge_childのidの要素から成る上記のHTMLを想定します。

var position = $('#hoge_child').position();
console.log(position.top); // top
console.log(position.left); // left

上記のコードで、positionメソッドの戻り値のオブジェクトのtopやleftプロパティでhoge_parentのidの要素に対するhoge_childのidの要素の位置が取得できます。

スクロール位置

スクロール位置の取得も可能です。

スクロール位置はscrollTopメソッドとscrollLeftメソッドで取得できます。

$(window).scrollTop(); // top
$(window).scrollLeft(); // left

上記のコードのように、$(window)でメソッドを実行してスクロール位置を取得します。