Estoy tratando de animar durante el desplazamiento, pero la suerte con mi código…

Tengo este jquery

$(window).scrollTop(200);

Ahora quería dar un efecto de animación

Lo intentó, pero no funciona:

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

He aplicado esto en función de clic como este:

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

Y ahora quiero dar el efecto de animar pero no funciona…

  • así?
  • Cómo es que no trabaja? Haga clic en ejecutar y usted sí la animación.
  • nope! en mi sitio……
  • Se puede hacer un JSFiddle?
  • Nota de actualización: usted no puede tener animate en $(window). Uso $('html,body') lugar. JSFiddle

6 Comentarios

  1. 59

    Tienes que utilizar $('html,body') en lugar de $(window) porque window no tiene un scrollTop propiedad.

    JS:

    $('#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
    })

    CSS:

    #top {
      margin-bottom: 2000px;
    }

    HTML:

    <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>

    • Nope! ‘cuerpo’ no funcionó para mí…
    • Sí, en chrome y safari funciona para $('html,body') y $(body), pero en firefox funciona para $('html,body') y $(html). Obviamente el scrolltop tiene algunos problemas de compatibilidad del navegador. Sin embargo, el uso $('html,body'), que parece funcionar para ambos.
    • Alguien sabe de una solución para dispositivos móviles así?
    • Qué pasa si usted está en un modal/cuadro de diálogo y desea desplazarse a una parte específica dentro de esa sección? Nvm: stackoverflow.com/questions/16072895/…
    • que raro, yo estoy usando Chrome v67.0.3396.99 y $(‘body’) no funciona… tengo que usar $(‘html, body’)
    • Me has salvado, me hizo $('html') y mi cliente se quejó de que no funciona en safari. $('html, body') de las grandes obras.

  2. 45

    si usted tiene html y estilo de cuerpo height:100%; no su trabajo
    uso

    height: auto;
    min-height: 100%;
    • Gracias! El desplazamiento superior de la función no era de trabajo, a menos que me hizo esto.
    • Impresionante! esto funciona perfecto. Tropezó con esto, el pensamiento muy tarde, pero encontré mi solución. Bravo!
    • Gracias, también ayudó!
    • Wow que raro… Había height:100% y que estaba causando todo tipo de extraños problemas de desplazamiento, especialmente en el móvil…
    • Déjame adivinar, muchos de nosotros solíamos tener height: 100% porque de notas de pie de página de la técnica 🙂
    • He iniciado sesión en stackoverflow cuenta de votar a favor de su respuesta!! gran. gracias
    • Esto me salvó de la locura
    • Te amo! Me salvó el día!
    • Muchas gracias. Yo estaba jugando con mi js códigos. Pero que resolvió mi problema.
    • Oh, gracias. Que rescate de mi vida. Funciona bien

  3. 0

    sólo se necesita añadir píxeles

    $('body').animate({ scrollTop: "300px" }, 1000);
    • Véase mi edición me han testet et y funciona
    • cambiar ventana de ‘el cuerpo’
  4. 0

    DEMO

    <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>
  5. 0

    Estoy usando Angular y estaba tratando de desplazarse a un elemento que se ha añadido en un ng-repeat. Pongo este código dentro de un $timeout (con cero tiempo, sólo para hacer que suceda después de que los elementos de la muestra) y esto fue suficiente para que el nuevo elemento a tener un offset().top

    …pero creo que fue demasiado, va a agregar docenas de nuevos elementos, por lo que no tienen el poder de procesamiento para desplazarse a animar. Cuando me puse el tiempo de espera de 1 segundo, funcionaba (aunque en realidad tomó 7 segundos antes de que el tiempo de espera llamaron).

    Llegué a la conclusión de que la animación, desplazamiento suave de no estar realmente manejable aquí, y en su lugar estoy usando

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

    He tenido este problema así y se dio cuenta de que el problema estaba dentro de la CSS.

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

    Quitar:

    html {
        overflow-x: hidden;
    }

    Entonces, funcionó.

    Espero que ayude a alguien!

Dejar respuesta

Please enter your comment!
Please enter your name here