JavaScript get window X Y position for scroll

Question

I m hoping to find a way to get the current viewable window s position  relative to the total page width height  so I can use it to force a scroll from one section to another  However  there seems to be a tremendous amount of options when it comes to guessing which object holds the true X Y for your browser   Which of these do I need to make sure IE 6   FF 2   and Chrome Safari work   window innerWidth window innerHeight window pageXOffset window pageYOffset document documentElement clientWidth document documentElement clientHeight document documentElement scrollLeft document documentElement scrollTop document body clientWidth document body clientHeight document body scrollLeft document body scrollTop   And are there any others  Once I know where the window is I can set an event chain that will slowly call window scrollBy x y   until it reaches my desired point

User · Answer

Maybe more simple   var top    window pageYOffset    document documentElement scrollTop      left   window pageXOffset    document documentElement scrollLeft    Credits  so dom js L492

User · Answer

function FastScrollUp          window scroll 0 0      function FastScrollDown           i   document documentElement scrollHeight         window scroll 0  i      var step   20   var h t   var y   0  function SmoothScrollUp          h   document documentElement scrollHeight       y    step       window scrollBy 0  -step       if y  gt   h           clearTimeout t   y   0  return        t   setTimeout function   SmoothScrollUp    20         function SmoothScrollDown          h   document documentElement scrollHeight       y    step       window scrollBy 0  step       if y  gt   h           clearTimeout t   y   0  return        t   setTimeout function   SmoothScrollDown    20

User · Answer

Using pure javascript you can use Window scrollX and Window scrollY  window addEventListener  scroll   function event        var top   this scrollY          left  this scrollX     false     Notes     The pageXOffset property is an alias for the scrollX property  and The   pageYOffset property is an alias for the scrollY property    window pageXOffset    window scrollX     always true window pageYOffset    window scrollY     always true   Here is a quick demo    x000D   x000D  window addEventListener  scroll   function event    x000D     x000D      var top   this scrollY  x000D          left   this scrollX  x000D     x000D      var horizontalScroll   document querySelector   horizontalScroll    x000D          verticalScroll   document querySelector   verticalScroll    x000D       x000D      horizontalScroll innerHTML    Scroll X      left    px   x000D        verticalScroll innerHTML    Scroll Y      top    px   x000D     x000D     false   x000D    box-sizing  border-box  x000D   root height  200vh width  200vw  x000D   wrapper  x000D      position  fixed  x000D      top 20px  x000D      left 0px  x000D      width 320px  x000D      background  black  x000D      color  green  x000D      height  64px  x000D    x000D   wrapper div  x000D      display  inline  x000D      width  50   x000D      float  left  x000D      text-align  center  x000D      line-height  64px x000D    x000D   horizontalScroll color  orange  x000D   lt div class wrapper gt  x000D       lt div class horizontalScroll gt Scroll  x y  to  lt  div gt  x000D       lt div class verticalScroll gt see me in action lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The method jQuery  v1 10  uses to find this is   var doc   document documentElement  var left    window pageXOffset    doc scrollLeft  -  doc clientLeft    0   var top    window pageYOffset    doc scrollTop   -  doc clientTop    0     That is    It tests for window pageXOffset first and uses that if it exists  Otherwise  it uses document documentElement scrollLeft  It then subtracts document documentElement clientLeft if it exists    The subtraction of document documentElement clientLeft   Top only appears to be required to correct for situations where you have applied a border  not padding or margin  but actual border  to the root element  and at that  possibly only in certain browsers

[javascript] JavaScript get window X/Y position for scroll

Examples related to javascript