JavaScript obtiene la posición X / Y de la ventana para desplazarse

Espero encontrar una manera de obtener la posición actual de la ventana visible (en relación con el ancho / alto total de la página) para poder usarla para forzar un desplazamiento de una sección a otra. Sin embargo, parece que hay una gran cantidad de opciones cuando se trata de adivinar qué objeto contiene la verdadera X / Y para su navegador.

¿Cuál de estos necesito para asegurarme de que IE 6+, FF 2+ y Chrome / Safari funcionen?

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

¿Y hay otros? Una vez que sepa dónde está la ventana, puedo configurar una cadena de eventos que se activará lentamente window.scrollBy(x,y);hasta que llegue al punto deseado.

El método que jQuery (v1.10) usa para encontrar esto es:

var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

Es decir:

• Prueba window.pageXOffsetprimero y usa eso si existe.
• De lo contrario, se utiliza document.documentElement.scrollLeft.
• Luego resta document.documentElement.clientLeftsi existe.

La sustracción de document.documentElement.clientLeft/ Topsolo parece ser necesaria para corregir situaciones en las que ha aplicado un borde (no relleno o margen, sino borde real) al elemento raíz, y en ese caso, posiblemente solo en ciertos navegadores.

Quizás más simple;

var top  = window.pageYOffset || document.documentElement.scrollTop,
    left = window.pageXOffset || document.documentElement.scrollLeft;

Créditos: so.dom.js # L492

Usando javascript puro puedes usar Window.scrollX y Window.scrollY

window.addEventListener("scroll", function(event) {
    var top = this.scrollY,
        left =this.scrollX;
}, false);

Notas

La propiedad pageXOffset es un alias para la propiedad scrollX, y la propiedad pageYOffset es un alias para la propiedad scrollY:

window.pageXOffset == window.scrollX; // always true
window.pageYOffset == window.scrollY; // always true

Aquí hay una demostración rápida

window.addEventListener("scroll", function(event) {
  
    var top = this.scrollY,
        left = this.scrollX;
  
    var horizontalScroll = document.querySelector(".horizontalScroll"),
        verticalScroll = document.querySelector(".verticalScroll");
    
    horizontalScroll.innerHTML = "Scroll X: " + left + "px";
      verticalScroll.innerHTML = "Scroll Y: " + top + "px";
  
}, false);

*{box-sizing: border-box}
:root{height: 200vh;width: 200vw}
.wrapper{
    position: fixed;
    top:20px;
    left:0px;
    width:320px;
    background: black;
    color: green;
    height: 64px;
}
.wrapper div{
    display: inline;
    width: 50%;
    float: left;
    text-align: center;
    line-height: 64px
}
.horizontalScroll{color: orange}

<div class=wrapper>
    <div class=horizontalScroll>Scroll (x,y) to </div>
    <div class=verticalScroll>see me in action</div>
</div>

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 >= 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 >= h )
       {clearTimeout(t); y = 0; return;}
     t = setTimeout(function(){SmoothScrollDown()},20);

}