Position of Div in relation to the Top of the Viewport

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 viewportvar top = viewportOffset.top;var left = viewportOffset.left;

//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) }}

Check out what the JS Frameworks have to offer. Mostly, they have worked out all - or at least most - of the browser specific problems and specialties.

In Prototype, there are the scrollOffset() functions. I'm not familiar enough with JQuery to point you to the right manual page but here is a question that seems to go towards the right direction.