jQueryでの位置の取得方法【現役エンジニアが解説】
今回は、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)でメソッドを実行してスクロール位置を取得します。