javascript - Div 的动态定位

Question

我有以下结构

Text                            Details
Show Details

Text
Show Details ...

当我现在按下显示详细信息时，我希望详细信息显示在与按下的链接相同的高度上。 (想象一下 100 个文本/链接。)

我已经将一个小的 JSfiddle 放在一起，元素的绝对定位是可能的，但不知何故我无法让它根据滚动位置动态工作。 http://jsfiddle.net/uRN64/201/

我尝试了以下 javascript 函数来设置位置:

var div = document.getElementById('update');
//div.style.top = window.pageYOffset;
//div.style.top = document.body.parentElement.scrollTop;
//div.style.top = document.body.scrollTop;
div.style.top = '100px';

Answer 1

使用 e.target元素和 offsetTop属性(property)。

就是这么简单:

function toCurrentPosition(event) {
    var div = document.getElementById('update');
    div.style.top = event.target.offsetTop + "px";
}

jsFiddle Demo

P.S - 注意我使用的是 onclick事件而不是 href。