How to get an element s top position relative to the browser s viewport

Question

I want to get the position of an element relative to the browser s viewport  the viewport in which the page is displayed  not the whole page   How can this be done in JavaScript   Many thanks

User · Answer

Thanks for all the answers  It seems Prototype already has a function that does this  the page   function   By viewing the source code of the function  I found that it first calculates the element offset position relative to the page  i e  the document top   then subtracts the scrollTop from that  See the source code of prototype for more details

User · Answer

I am assuming an element having an id of btn1 exists in the web page  and also that jQuery is included  This has worked across all modern browsers of Chrome  FireFox  IE   9 and Edge  jQuery is only being used to determine the position relative to document   var screenRelativeTop        btn1   offset   top -  window scrollY                                                 window pageYOffset    document body scrollTop    var screenRelativeLeft        btn1   offset   left -  window scrollX                                               window pageXOffset    document body scrollLeft

User · Answer

On my case  just to be safe regarding scrolling  I added the window scroll to the equation   var element   document getElementById  myElement    var topPos   element getBoundingClientRect   top   window scrollY  var leftPos   element getBoundingClientRect   left   window scrollX    That allows me to get the real relative position of element on document  even if it has been scrolled

User · Answer

The function on this page will return a rectangle with the top  left  height and width co ordinates of a passed element relative to the browser view port       localToGlobal  function   el            var target    el         target width   target offsetWidth         target height   target offsetHeight         target left   target offsetLeft         target top   target offsetTop         gleft   0         gtop   0         rect               var moonwalk   function   parent             if     parent                gleft     parent offsetLeft              gtop     parent offsetTop              moonwalk   parent offsetParent              else               return rect                 top  target offsetTop   gtop              left  target offsetLeft   gleft              bottom   target offsetTop   gtop    target height              right   target offsetLeft   gleft    target width                                         moonwalk  target offsetParent            return rect

User · Answer

The existing answers are now outdated  The native getBoundingClientRect   method has been around for quite a while now  and does exactly what the question asks for  Plus it is supported across all browsers  including IE 5  it seems    From 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  i e  the window var top   viewportOffset top  var left   viewportOffset left

User · Answer

var element    document querySelector  selector    var bodyRect   document body getBoundingClientRect        elemRect   element getBoundingClientRect        offset     elemRect top - bodyRect top

User · Answer

Edit   Add some code to account for the page scrolling   function findPos id        var node   document getElementById id            var curtop   0      var curtopscroll   0      if  node offsetParent            do               curtop    node offsetTop              curtopscroll    node offsetParent   node offsetParent scrollTop   0            while  node   node offsetParent            alert curtop - curtopscroll             The id argument is the id of the element whose offset you want  Adapted from a quirksmode post

User · Answer

Sometimes getBoundingClientRect   object s property value shows 0 for IE  In that case you have to set display    block  for the element  You can use below code for all browser to get offset   Extend jQuery functionality     function          jQuery fn weOffset   function              var de   document documentElement            this  css  display    block            var box     this  get 0  getBoundingClientRect            var top   box top   window pageYOffset - de clientTop          var left   box left   window pageXOffset - de clientLeft          return   top  top  left  left             jQuery      Use    var elementOffset           elementId  weOffset

User · Answer

jQuery implements this quite elegantly  If you look at the source for jQuery s offset  you ll find this is basically how it s implemented   var rect   elem getBoundingClientRect    var win   elem ownerDocument defaultView   return       top  rect top   win pageYOffset      left  rect left   win pageXOffset

User · Answer

function inViewport element        let bounds   element getBoundingClientRect        let viewWidth   document documentElement clientWidth      let viewHeight   document documentElement clientHeight       if  bounds  left    lt  0  return false      if  bounds  top    lt  0  return false      if  bounds  right    gt  viewWidth  return false      if  bounds  bottom    gt  viewHeight  return false       return true      source

User · Answer

You can try   node offsetTop - window scrollY  It works on Opera with viewport meta tag defined

[javascript] How to get an element's top position relative to the browser's viewport?

Examples related to javascript