Position of Div in relation to the Top of the Viewport

Question

I am wondering how I can get the number of pixels (or measurement in general) from a div to the top of the window in Javascript. I am not looking for an offset y in relation to the document, simply to the top of where the browser is displaying. I tried the "answered" solution here: Is it possible to get the position of div within the browser viewport? Not within the document. Within the window, but at least in Safari, I am running into a problem where it returns the same number no matter where the div's really are.

Thanks for any help!

Answer 1

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; 

Answer 2

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