scrolltop con animación no funciona

4 minutos de lectura

scrolltop con animacion no funciona
Bhojendra Rauniyar

Estoy tratando de animar mientras me desplazo pero no tuve suerte con mi código…

tengo este jquery

$(window).scrollTop(200);

Ahora quería dar efecto de animación.

Así que probé estos pero no funcionaron:

1. $(window).animate({scrollTop:200},1000);
2. $('body').animate({scrollTop: 200}, 1000);

He aplicado esto en una función de clic como esta:

$('.goto').click(function(){
    $(window).scrollTop(485); // its working
});

Y ahora quiero dar efecto de animado pero no funciona…

  • Como esto?

    – Vucko

    13 sep.


  • ¿Cómo no funciona? Hacer clic correr y verás el animación.

    – Vucko

    13 sep.

  • ¡no! en mi sitio…..

    – Bhojendra Rauniyar

    13 sep.

  • puedes hacer un JSFiddle?

    – Vucko

    13 sep.

  • Nota sobre tu actualización: no puedes tener animate sobre $(window). Usar $('html,body') en lugar de. JSFiddle

    – Vucko

    13 sep.


1642891326 471 scrolltop con animacion no funciona
Vucko

tienes que usar $('html,body') en vez de $(window) porque window no tiene una propiedad scrollTop.

$('#scroll-bottom').on('click', function() {
  $('html, body').animate({
    scrollTop: 2000
  }, 2000); // for all browsers
  
  // $('html').animate({scrollTop: 2000}, 2000); // works in Firefox and Chrome
  // $('body').animate({scrollTop: 2000}, 2000); // works in Safari
})
#top {
  margin-bottom: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="top">
  <button id="scroll-bottom">scroll</button>
</div>
<div>bottom</div>

  • Si en cromo y safari trabaja para $('html,body') y $(body), pero en Firefox trabaja para $('html,body') y $(html). Obviamente el scrolltop tiene algunos problemas de compatibilidad con el navegador. Sin embargo, usa $('html,body'), eso parece funcionar para ambos.

    – Vucko

    13 sep.


  • ¿Alguien sabe de una solución para dispositivos móviles también?

    – JisuKim82

    27 abr.

  • ¿Qué sucede si está en un cuadro de diálogo/modal y desea desplazarse a una parte específica dentro de esa sección? NVM: stackoverflow.com/questions/16072895/…

    – eaglei22

    23 ene.


  • eso es extraño, estoy usando Chrome v67.0.3396.99 y $(‘body’) no funciona… Tengo que usar $(‘html, body’)

    – Señor Q

    13 jul.

  • Me salvaste, lo hice $('html') y mi cliente se quejó de que no funciona en safari. $('html, body') Funciona genial.

    – ganado

    24 mayo 2019 en 13:54

si tiene html y altura de estilo de cuerpo: 100%; no funciona

height: auto;
min-height: 100%;

  • ¡Gracias! La función de desplazamiento superior no funcionaba a menos que hiciera esto.

    – lancey

    31 dic. 15 a las 14:43

  • ¡Impresionante! esto funciona perfecto Tropecé con esto, pensé muy tarde, pero encontré mi solución. ¡Bravo!

    – Zafar

    27 ago. 16 a las 12:22

  • Wow, eso es extraño… Tenía height:100% y eso estaba causando todo tipo de problemas de desplazamiento extraños, especialmente en dispositivos móviles…

    – Brian Leishmann

    28 sep.

  • Déjame adivinar, muchos de nosotros solíamos tener height: 100% debido a la técnica del pie de página adhesivo 🙂

    – cincplug

    28 feb. 17 en 13:26

  • Muchas gracias. Estaba jugando con mis códigos js. Pero resolviste mi problema.

    – amir22

    20 oct.

También tuve este problema y me di cuenta de que el problema estaba dentro del CSS.

En mi caso, necesitaba eliminar overflow-x: hidden; de la etiqueta HTML.

Eliminar:

html {
    overflow-x: hidden;
}

Entonces, funcionó.

¡Espero que eso ayude a alguien!

scrolltop con animacion no funciona
Kimtho6

solo necesitas agregar un píxel

$('body').animate({ scrollTop: "300px" }, 1000);

MANIFESTACIÓN

<html>
function scrollmetop(dest){
    var stop = $(dest).offset().top;
    var delay = 1000;
    $('body,html').animate({scrollTop: stop}, delay);
    return false;
}

scrollmetop('#test');
<body>
    <div style="margin: 100px 100px 1000px 100px">
       <div id="test" style="width: 100px; height: 100px; border: 3px solid black;">target object</div>
    </div>
</body>
</html>

1642891326 211 scrolltop con animacion no funciona
MalcolmOcéano

Estoy usando Angular y estaba tratando de desplazarme hacia abajo a un elemento que se había agregado en una repetición ng. Pongo este código dentro de un $timeout (con tiempo cero, solo para que sucediera después de que se mostraran los elementos) y esto fue suficiente para que el nuevo elemento tuviera una offset().top

… pero creo que había demasiadas cosas agregando docenas de elementos nuevos, por lo que no tenía el poder de procesamiento para animar con desplazamiento. Cuando configuré el tiempo de espera en 1 segundo, funcionó (aunque en realidad tomó 7 segundos antes de que se llamara el tiempo de espera).

Llegué a la conclusión de que el desplazamiento suave y animado no será realmente manejable aquí, y en su lugar solo estoy usando

document.body.scrollTop = entry.offset().top

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad