javascript - 要素の上からの距離を取得する方法は?

Question

JavaScript を使用して、親要素ではなく、ページの上部から要素までの距離を取得する方法を知りたいです。

http://jsfiddle.net/yZGSt/1/

Answer 1

offsetTop は、要素の親のみを調べます。親がなくなるまで親ノードをループし、それらのオフセットを合計します。

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };
}

更新: この回答にはいくつかの問題があります。値は本来あるべき値と比べてわずかな違いがあり、場合によっては正しく機能しません。

正確な@eeglbalazsの回答を確認してください。

Answer 2

使用するoffsetTop

document.getElementById("foo").offsetTop

デモ

Answer 3

要素の一番上の位置までスクロールします。

var rect = element.getBoundingClientRect();
var offsetTop = window.pageYOffset + rect.top - rect.height;

Answer 4

document.getElementById("id").offsetTop

Answer 5

jQuery のoffset()メソッドを使用する:

$(element).offset().top

例: http://jsfiddle.net/yZGSt/3/