javascript - plugin - scroll jquery ejemplos

jQuery scrollTop() no funciona en el desplazamiento de DIV en los navegadores móviles, ¿alternativas?

Question

Estoy tratando de desplazarme a una ubicación específica en un DIV de desplazamiento. En este momento estoy usando un desplazamiento de píxeles con la función jQuery scrollTop () que funciona muy bien en los navegadores de escritorio, pero no funciona en los navegadores de móviles Android con la excepción del navegador Google Chrome de Android (no tengo un dispositivo iOS para probar si funciona) ). Todas las soluciones que he encontrado son para el desplazamiento de la página (ventana) y no para el desplazamiento en un DIV. ¿Alguien tiene alguna sugerencia sobre qué más puedo usar para realizar la misma tarea?

Aquí hay un ejemplo :
http://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/

Otras cosas que he probado que funcionan en navegadores de escritorio :

document.getElementById(''ID_of_element_in_a_DIV'').scrollIntoView();
document.getElementById(''ID_of_DIV'').scrollTop = 200;

EDITAR 11/11/13:

Este es un problema conocido del navegador de Android: https://code.google.com/p/android/issues/detail?id=19625

Un usuario en el informe de error sugirió una solución:

Debido a que el problema solo parece aparecer cuando la propiedad de desbordamiento está configurada para desplazarse, primero puede establecerla en ''oculta'', configurar la propiedad scrollTop y luego restablecerla en ''scroll'' (o auto). La propiedad scrollTop parece respetarse cuando el elemento se vuelve a representar con barras de desplazamiento. No está claro si esto tiene efectos secundarios inesperados, pero "¡funciona en mi máquina!"

Answer 1

¿Intentaste esto?

$("html").scrollTop(0);

Answer 2

Encontré la respuesta aquí http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/

Los teléfonos móviles no comprenden $(''html,body'') por lo que puede hacer lo siguiente para móviles

if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
window.scrollTo(0)
} else {
// default `$(''html,body'')` code for scrolling
}

O

simplemente use $(''body'') lugar de $(''html, body'') .

Answer 3

Esto funcionó para mí:

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

Answer 4

Intenta usar el método .animate de jQuery:

$(''.div'').animate({ scrollTo: x; });

Donde x es igual a la posición del div que desea desplazarse hasta la parte superior de.

Answer 5

La única forma de lograr el desplazamiento hacia la parte superior de la página en una Galaxy Tab fue ocultando el body de la página durante 100 ms mientras se desplaza. Usando jQuery:

$("body").hide();
window.scrollTo(0, 0);
setTimeout(function(){ $("body").show() }, 100);

Answer 6

La configuración temporal de la propiedad de overflow en ''oculta'', como se recomienda en la respuesta de @Allan Nienhuis '', no funciona en Android 4.0.3 , por ejemplo (que es, por ejemplo, lo que está ejecutando el Kindle Fire 2s) - cuando se configura el overflow hacia atrás para scroll , el elemento se desplaza de nuevo a la parte superior.

Alternativas:

• here rodar su propio desplazamiento a través de una función de ayuda, como se demuestra here : si bien esto es fácil de implementar, no tiene nada que ver con el desplazamiento inercial o el desplazamiento excesivo.

• Utilice una biblioteca como iScroll , que implementa su propio y sofisticado desplazamiento (inercial, overcrolling) basado en las transformaciones de CSS.

Sin embargo, el uso de iScroll requiere un poco de configuración: necesita un div envoltura con overflow: hidden altura y estilo fijos overflow: hidden y el elemento a desplazar no debe tener ningún estilo de overflow . Esta demostración de jsFiddle muestra cómo se hace.

Answer 7

Tengo un par de soluciones para que pruebes. Tendrá que probarlos usted mismo, ya que no los he probado antes en un navegador móvil, pero aquí están:

1. Use el método .animate() jQuery (o .animate() según cuál sea su objetivo final) para ajustar el margen superior (nota: tendría que cambiar el desbordamiento a oculto y envolver el texto en un div interno, que sería el elemento cuyo margen estás ajustando)
2. Haga lo mismo que en la primera solución, excepto que establezca la posición del div incrustado en relativa y ajuste su atributo top .

Déjeme saber si necesita ayuda con algo o si tiene más preguntas sobre esto. ¡Buena suerte! :)

Tenga en cuenta que aunque no los he probado en dispositivos móviles antes de que se basen en los estándares CSS, no en las funciones de jQuery, deberían funcionar.

Answer 8

Tuve el mismo problema y lo resolví utilizando jquery .offset() lugar.

http://api.jquery.com/offset/

$(''#yourFineElement'').offset({ top: X, left Y)});

Answer 9

Una solución que me funcionó: primero, establezca temporalmente la propiedad de desbordamiento en ''oculta'', luego establezca la propiedad scrollTop y luego establezca la propiedad de desbordamiento en ''scroll'' (o auto). El valor scrollTop parece mantenerse intacto y respetado cuando la propiedad de desbordamiento se establece de nuevo para ''desplazarse''. Esta fue una solución bastante trivial que funcionó en todos los navegadores que probé (de escritorio y móviles). No lo probé exhaustivamente ni lo hice con las transiciones implementadas, por lo que puede haber efectos secundarios que no he encontrado ... Su millaje puede variar, pero es una cosa fácil de probar.

Answer 10

Usa el siguiente código:

$("body").animate( { scrollTop: 50, }, 800, function(){
$("body").clearQueue();
} );

Answer 11

jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$(''html,body'').animate({scrollTop:$(this.hash).offset().top}, 1500);
});
});
<a href="#top" class="scroll"></a>