jquery - example - El mismo problema anterior,.scrollTop(0) no funciona en Chrome y Safari

scrolltop jquery example

Question

En primer lugar, permítanme señalar que busqué en Google e incluso miré las respuestas aquí, y esto , sin embargo, todavía no he encontrado una solución funcional para mi caso.

Diseñé una página que tiene varios elementos fijos que cubren la página y crea html5 / css3 para crear una "máscara" limpia sobre el documento principal, lo que permite que la barra de desplazamiento del cuerpo siga desplazando el contenido subyacente.

En firefox y es decir (bleh), scrollTop (0) funciona perfectamente. Sin embargo, como lo afirma la pregunta, no tanto en mis navegadores favoritos.

Algo de lo que he tomado nota es llamar a los siguientes antes del evento scrollTo y después

$("body,html,document").each(function(){ console.log($(this).scrollTop()); });

Los resultados no fueron agradables, me dice que el scrolltop ya es 0 y por lo tanto ni siquiera está intentando un scrollTop, o al menos eso es lo que "pienso" hasta ahora.

Y antes de que preguntes, hice esa llamada de consola en cada uno de esos 3 elementos, ya que el documento scrolltop debería estar cubierto dentro de uno de esos elementos (creo que cuerpo, pero como en es decir, también tienes que llamar a html)

¿Alguien que toma ideas?

FYI, puede ser una rareza css (aunque no funciona como lo hace en IE y no en cromo) pero ya he intentado lo siguiente con resultados negativos :

$(window).scrollTop(0);
$(document).scrollTop(0);
$("html").scrollTop(0);
$("body").scrollTop(0);
window.scroll(0,0);
$("body,html,document").scrollTop(0);
$("body,html").scrollTop(0);

Lo que supongo que amplía mi pregunta, ¿es esto un problema CSS? No tengo un enlace externo y el código es demasiado largo (hecho con Partials de vista de CI) para publicarlo todo, pero para CLARIFICAR lo que he hecho:

• Se corrigió el encabezado, el pie de página y la barra lateral dejando contenido para desplazarse con la barra de desplazamiento de documentos
• muy poco javascript o jquery implementado hasta ahora, casi 0 css personalizados fuera de la posición de fijación de los elementos de presa
• el "contenido" está ajax en el uso de la función .load de jQuery en función de los elementos de la lista en los que se hace clic en el navegador de la barra lateral

temp Fiddle ya no está arriba

Answer 1

Acabo de probar lo siguiente en IE8 y Chrome, y ambos funcionan:

$(window).scrollTop(0)

Answer 2

Para las personas que necesitan las configuraciones de desbordamiento, la solución es usar una animación como esta.

    $(''#element_id'').stop().animate({ scrollTop: 0 }, 500);

Esto parece comportarse mejor que .scrollTop(0) .

Answer 3

Yo tuve el mismo problema. Si pongo

$(window).scrollTop(0);

en el manejador listo para documentos, no funcionó; pero si lo pruebo en el panel de la consola de JavaScript del kit de herramientas para desarrolladores de Chrome, ¡funcionó! La única diferencia fue el tiempo de ejecución del script. Así que lo intenté

window.setTimeout(function() {
    $(window).scrollTop(0); 
}, 0);

Y funcionó. No es necesario establecer un retraso superior a 0, aunque eso también funcionó. No es culpa de jQuery, porque es lo mismo con

window.scrollTo(0, 0);  window.scroll(0, 0);

Por lo tanto, la razón podría ser que el navegador llene la propiedad window.pageYOffset después de que presente la página y ejecute el js.

Answer 4

El problema es con CSS. En particular, las reglas que he incluido a continuación.

html, body {
    overflow-x: hidden;
    overflow-y: auto;
}

Aunque estas reglas están obviamente relacionadas con las barras de desplazamiento, no estoy seguro de por qué están causando el comportamiento que está observando. Pero si los elimina, debería resolver su problema.

Ver: http://jsfiddle.net/jNWUm/23/ .

Answer 5

Este código fue probado en cromo. http://jsfiddle.net/wmo3o5m8/1/

(function () {
    var down = false, downX, downY;
    document.onmousedown = function (e) {
        downX = e.pageX;
        downY = e.pageY;
        down = true;
    };
    document.onmouseup = function () { down = false; };
    document.onmousemove = function (e) {
        if (down) {
            window.scrollTo(
                window.scrollX + downX - e.pageX,
                window.scrollY + downY - e.pageY
            );
        }
    };
})();

Answer 6

Este es el comportamiento normal cuando en tu CSS declaras un overflow: hidden para los elementos html o body dom, como puedes leer en los documentos jQuery API :

La posición de desplazamiento vertical es la misma que la cantidad de píxeles que están ocultos de la vista sobre el área desplazable. Si la barra de desplazamiento está en la parte superior, o si el elemento no se puede desplazar, este número será 0.

Con overflow: hidden la barra de desplazamiento no es visible, por lo tanto, el elemento no se puede desplazar, por lo que el número será 0 en cada navegador (me pregunto) que utilizará.

Answer 7

FYI, si no está en la parte superior del cuerpo, es decir, en un iframe, simplemente prueba window.top.scrollTo (0,0);

Answer 8

También vea esta respuesta: scrolltop roto en Android : parece funcionar mejor cuando el desbordamiento se establece en visible y la posición en relativa, pero mmm. Puede encontrar estos útiles ...

function repeatMeOnMouseDown() // for smooth scrolling
{
    var $newTop = $(''#element_id'').position().top + ($goingUp ? -20 : 20);
    $(''#element_id'').animate({top: $newTop}, 20, repeatMeOnMouseDown); 
}

// these should work
$(''#element_id'').animate({top: -200}, 200); // scroll down
$(''#element_id'').animate({top: 0}, 200); // scroll back up

// DON''T DO THIS - Offsets don''t work with top like they do with scrollTop 
$(''#element_id'').animate({top: ("-= " + 200)}, 200);

// and when you get tired of fighting to do smooth animation 
// on different browsers (some buggy!), just use css and move on
function singleClick($goingUp)
{
   var $newTop = $(''#element_id'').position().top + ($goingUp ? -200 : 200);
    $(''#element_id'').css({top: $newTop}, 20); 
}

Answer 9

Tuve el mismo problema al desplazarme en chrome . La razón era la height:100% estilo height:100% en body y html . Ver esta respuesta

Answer 10

$(''#element-id'').prop(''scrollTop'', 0); también debería hacer el truco.