Establecer posición de desplazamiento

107

Estoy tratando de establecer la posición de desplazamiento en una página para que el desplazamiento se desplace hasta la parte superior.

Creo que necesito algo como esto, pero no funciona:

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

¿Algunas ideas?

Mike Rifgin
fuente

Respuestas:

178

Puedes usar window.scrollTo(), así:

window.scrollTo(0, 0); // values are x,y-offset
Nick Craver
fuente
3
esto me alegra el día, woohoooooo
ArifMustafa
51

También vale la pena señalar window.scrollBy(dx,dy)( ref )

Annakata
fuente
1
Esto fue extremadamente útil
Jeff82
34

Tenga en cuenta que si desea desplazar un elemento en lugar de la ventana completa, los elementos no tienen los métodos scrollToy scrollBy. Debieras:

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;

También puede imitar las funciones window.scrollToy window.scrollBypara todos los elementos HTML existentes en la página web en los navegadores que no lo admiten de forma nativa :

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
});

para que puedas hacer:

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.definePropertyse recomienda, ya que agregar propiedades directamente al prototypees un mal hábito (cuando lo vea :-).

Jorge Fuentes González
fuente
Esto fue útil, gracias. Pero descubrí que los elementos tienen el método 'scrollTo'. Ver developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
Narvalex
@Narvalex eso es lo que dice el segundo párrafo.
Jorge Fuentes González
La referencia que señalé muestra que esas funciones están integradas. No es necesario definir las propiedades de los métodos
integrados
@Narvalex Oh, acabo de leer "no tengo", mi mal. Debo decir que no todos los navegadores lo tienen entonces, aunque hoy en día es difícil encontrarlo (como IE11).
Jorge Fuentes González
3

... O simplemente reemplácelo bodypor documentElement:

document.documentElement.scrollTop = 0;
maxime schoeni
fuente