JavaScript obter janela X / Y posição para rolagem

Espero encontrar uma maneira de obter a posição atual da janela visível (em relação à largura / altura total da página) para que eu possa usá-la para forçar um deslocamento de uma seção para outra. No entanto, parece haver uma enorme quantidade de opções quando se trata de adivinhar qual objeto contém o verdadeiro X / Y para o seu navegador.

De quais delas preciso para garantir que o IE 6+, FF 2+ e Chrome / Safari funcionem?

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

E existem outros? Depois de saber onde está a janela, posso definir uma cadeia de eventos que será chamada lentamente window.scrollBy(x,y);até atingir o ponto desejado.

O método que o jQuery (v1.10) usa para encontrar isso é:

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

Isso é:

• Ele testa window.pageXOffsetprimeiro e usa isso, se existir.
• Caso contrário, ele usa document.documentElement.scrollLeft.
• Em seguida, subtrai document.documentElement.clientLeftse existir.

A subtração de document.documentElement.clientLeft/ Topparece ser necessária para corrigir situações em que você aplicou uma borda (não preenchimento ou margem, mas borda real) ao elemento raiz e, nesse caso, possivelmente apenas em determinados navegadores.

Talvez mais simples;

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

Créditos: so.dom.js # L492

Usando javascript puro, você pode usar Window.scrollX e Window.scrollY

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

Notas

A propriedade pageXOffset é um alias para a propriedade scrollX e a propriedade pageYOffset é um alias para a propriedade scrollY:

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

Aqui está uma demonstração 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);

}