Position of Div in relation to the Top of the Viewport
//First get the correct geometry for the browser
(function(){
Run= window.Run || {};
if(window.pageYOffset!= undefined){
Run.topLeftScroll= function(hoo){
var wo= [window.pageXOffset, window.pageYOffset]
if(hoo && hoo.nodeType== 1){
hoo= mr(hoo);
var T= 0, L= 0;
while(hoo){
L+= hoo.offsetLeft;
T+= hoo.offsetTop;
hoo= hoo.offsetParent;
}
wo= [L, T, wo[0], wo[1]];
}
return wo;
}
}
else if(document.body.scrollTop!== undefined){
Run.topLeftScroll= function(hoo){
var B= document.body;
var D= document.documentElement;
D= (D.clientHeight)? D: B;
wo= [D.scrollLeft, D.scrollTop];
if(hoo && hoo.nodeType== 1){
hoo= mr(hoo);
var T= 0, L= 0;
while(hoo){
L+= hoo.offsetLeft;
T+= hoo.offsetTop;
hoo= hoo.offsetParent;
}
wo= [L, T, wo[0], wo[1]];
}
return wo;
}
}
})()
// shortcut function
if(window.Run && Run.topLeftScroll){
Run.getPosition= function(who, wch){
var A= Run.topLeftScroll(who);
if(!wch) return A;
switch(wch.toUpperCase()){
case 'X': return A[0];// element Left in document
case 'Y': return A[1];// element Top in document
case 'L': return A[0]-A[2];// Left minus scroll
case 'T': return A[1]-A[3];// Top minus scroll
case 'SL': return A[2];// scroll Left
case 'ST': return A[3];// scroll Top
default: return 0;
}
// all returns are integers (pixels)
}
}
The existing answers are now outdated. The getBoundingClientRect()
method has been around for quite a while now, and does exactly what this question asks for. Plus it is supported across all browsers.
From this MDN page:
The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport.
You use it like so:
var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;