jquery - animate - scrolltop javascript

jQuery animating scroll top to 0 no funciona en Windows Phone

Question

He escrito un sitio web que tiene una función que desplaza la vista de los usuarios a la parte superior de la página. La llamada en cuestión es:

$(''html,body'').animate({scrollTop:0}, 150, ''swing'');

Esto funciona bien en todos los navegadores de escritorio, pero en Windows Phone, solo desplaza al usuario hacia arriba unos 180 píxeles, luego se detiene. He intentado reemplazar la función con:

$(''html,body'').scrollTop(0);

Se coloca en la parte superior de los escritorios, pero se desplaza hacia la parte superior del teléfono. Creo que es necesario que Internet Explorer Mobile intente animar sin problemas el desplazamiento, y está causando el problema. Si este es el caso (o si no, alguien podría corregirme), ¿cómo puedo anular esta función para que la animación funcione?

EDITAR

Aunque no es ideal, parece funcionar en una capacidad limitada, he reemplazado el código de desplazamiento con esto:

$(''html,body'').animate({scrollTop:0}, 150, ''swing'', function() {
    $(''html,body'').scrollTop(0);
});

Pero sería bueno saber si hay una opción para desactivar el desplazamiento suave en Mobile IE programáticamente.

Answer 1

Lo solucioné de esta manera

El enlace: <a href="#about" data-target="about" class="scroll-to"> Acerca de </a>

El nombre del ancla #about lo hace funcionar en dispositivos con desplazamiento suave

        function scrollToElement(elementId) {
            var top = $("#" + elementId).offset().top;
            $(''html,body'').animate({ scrollTop: top }, 250);
        }

        $(".scroll-to").click(function () {
            scrollToElement($(this).data("target"));
        });

Answer 2

Ninguna de estas soluciones funcionó para mí ni en Windows Phone 7. Lo que sí funcionó fue eliminar la animación () y confiar simplemente en scrollTop en la etiqueta html. Espero que esto ayude a alguien.

Esta:

$(''html'').scrollTop(distance);

en lugar de:

$(''html,body'').animate({ scrollTop: distance }, 250);

Answer 3

En Windows Phone 8, me estoy encontrando con el mismo problema. Actualmente estoy haciendo el siguiente hack, donde espera hasta que la animación esté "completa" y luego ejecuta una ventana estándar.scrollTo para asegurarse de que se desplaza a la ubicación correcta.

scrollHmtlBody: function (scrollToTarget, duration) {
    $(''html, body'').animate({ scrollTop: scrollToTarget }, duration);

    // Windows Phone doesn''t animate properly, 
    // this makes sure it scrolls to the appropriate position (eventually)
    setTimeout(function() { 
        window.scrollTo(0, scrollToTarget);
    }, duration + 75);
}

No estoy satisfecho con el resultado, funciona, pero debido a la demora de 75 ms, tiene dudas antes de "finalizar" la animación de desplazamiento. Con menos retraso, el Windows Phone aparentemente se niega a realizar la acción scrollTo (¿Tal vez cree que actualmente se está "desplazando"?)

Puede que termine recurriendo a una cláusula if / else con detección de dispositivo, pero en este momento estoy tratando de encontrar una mejor solución en lugar de seguir por ese camino.

Answer 4

Me encontré con el mismo problema en mi Windows Phone 8. En mi caso, tenía que desplazar la ventana hacia la parte inferior, pero en el teléfono simplemente no funcionaba.

Al final, utilicé una combinación de soluciones @topherg y @LocalPCGuy con una ligera variación para llevar la pantalla a la parte inferior.

Aquí está mi código en caso de que ayude a alguien más:

$("html, body").stop().animate({
    scrollTop: $("#last-message").offset().top
}, 2000, ''swing'', function () {
    $("html, body").scrollTop($("#last-message").offset().top);
});

setTimeout(function () {
    window.scrollTo(0, document.body.scrollHeight);
}, 2075);

Donde # last-message es el div al que quiero desplazarme. Se siente un poco hacky, pero también lo hace Windows Phone: P