Definir posição de rolagem

107

Estou tentando definir a posição de rolagem em uma página para que o rolador seja rolado até o topo.

Acho que preciso de algo assim, mas não está funcionando:

(function () { alert('hello'); document.body.scrollTop = 0; } ());

Alguma ideia?

Mike Rifgin
fonte

Respostas:

178

Você pode usar window.scrollTo(), assim:

window.scrollTo(0, 0); // values are x,y-offset
Nick Craver
fonte
3
isso faz meu dia, woohoooooo
ArifMustafa 01 de
51

Também vale a pena notar window.scrollBy(dx,dy)( ref )

Annakata
fonte
1
Isso foi extremamente útil
Jeff82 de
34

Observe que, se você quiser rolar um elemento em vez da janela inteira, os elementos não têm os métodos scrollToe scrollBy. Você deve:

var el = document.getElementById("myel"); // Or whatever method to get the element

// To set the scroll
el.scrollTop = 0;
el.scrollLeft = 0;

// To increment the scroll
el.scrollTop += 100;
el.scrollLeft += 100;

Você também pode imitar as funções window.scrollToe window.scrollBypara todos os elementos HTML existentes na página da web em navegadores que não oferecem suporte nativo :

Object.defineProperty(HTMLElement.prototype, "scrollTo", {
    value: function(x, y) {
        el.scrollTop = y;
        el.scrollLeft = x;
    },
    enumerable: false
});

Object.defineProperty(HTMLElement.prototype, "scrollBy", {
    value: function(x, y) {
        el.scrollTop += y;
        el.scrollLeft += x;
    },
    enumerable: false
});

então você pode fazer:

var el = document.getElementById("myel"); // Or whatever method to get the element, again

// To set the scroll
el.scrollTo(0, 0);

// To increment the scroll
el.scrollBy(100, 100);

NOTA: Object.definePropertyé encorajado, já que adicionar propriedades diretamente ao prototypeé um mau hábito (Quando você o vir :-).

Jorge Fuentes González
fonte
Isso foi útil, obrigado. Mas descobri que os elementos têm o método 'scrollTo'. Consulte developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
Narvalex
@Narvalex é o que afirma o segundo parágrafo.
Jorge Fuentes González
A referência que indiquei mostra que essas funções são integradas. Não há necessidade de definir propriedades de métodos
integrados
@Narvalex Oh, acabei de ler "não tenho", que pena. Devo dizer que nem todos os navegadores o possuem, embora hoje em dia seja difícil encontrar esse tipo de navegador (como o IE11).
Jorge Fuentes González
3

... Ou apenas substitua bodypor documentElement:

document.documentElement.scrollTop = 0;
maxime schoeni
fonte