jQuery .scrollTop (); + animación


172

Establezco la página para que se desplace hacia arriba cuando se hace clic en un botón. Pero primero usé una instrucción if para ver si la parte superior de la página no estaba configurada en 0. Luego, si no es 0, animé la página para desplazarme hacia la parte superior.

var body = $("body");
var top = body.scrollTop() // Get position of the body

if(top!=0)
{
  body.animate({scrollTop:0}, '500');
}

La parte difícil ahora es animar algo DESPUÉS de que la página se haya desplazado hacia la parte superior. Entonces, mi próximo pensamiento es averiguar cuál es la posición de la página. Así que usé el registro de la consola para averiguarlo.

console.log(top);  // the result was 365

Esto me dio un resultado de 365, supongo que ese es el número de posición en el que estaba justo antes de desplazarme hacia la parte superior.

Mi pregunta es ¿cómo configuro la posición en 0, para poder agregar otra animación que se ejecute una vez que la página esté en 0?

¡Gracias!


1
¿Es necesario que los botones en los que disparas el evento estén siempre visibles? Si no es así, tengo un código que no necesita ningún tipo de condición que pueda ser fácil para su primera condición
The Mechanic

1
No debe haber comillas alrededor de los milisegundos. La "cadena" a la que se refiere la documentación es lenta / rápida
mplungjan

Respuestas:


314

Para hacer esto, puede establecer una función de devolución de llamada para el comando animado que se ejecutará después de que la animación de desplazamiento haya finalizado.

Por ejemplo:

var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

Donde está ese código de alerta, puede ejecutar más javascript para agregar más animación.

Además, el 'swing' está ahí para establecer la relajación. Consulte http://api.jquery.com/animate/ para obtener más información.


1
Gracias Thomas, eso es lo que necesitaba. También agregué un retraso ya que la clase se agrega muy rápido. if (top! = 0) {console.log ("desplazamiento oculto"); body.animate ({scrollTop: 0}, '500', 'swing', function () {console.log ("Finished animating"); leftitems.delay (1000) .removeClass ("slide");}); }
Juan Di Diego

55
No estoy seguro de si es porque esta publicación tiene 4 años, pero creo que en las versiones más nuevas de jQuery necesitas eliminar esas comillas simples alrededor del tiempo: body.animate ({scrollTop: 0}, 500, 'swing', function () {alert ("Animación terminada");});
Andrew

27
Su devolución de llamada se ejecutará dos veces, por cierto, porque seleccionó dos elementos.
Big McLargeHuge

8
Thomas tuvo un buen punto al agregar cuerpo y html. Caso 1. Cuerpo de lectura de Chrome y srolling, FIrefox necesita html para hacerlo.
fearis

44
Acabo de probar: $ ('html') no funciona en Chrome y $ ('body') no funciona en Firefox, por lo que se necesita $ ('html, body'). Y también llamar a .stop () es algo bueno: intenté llamar a animar varias veces rápidamente en Chrome y después de eso no pude desplazarme hacia abajo en la página.
Lev Lukomsky

55

Prueba este código:

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

8
$("html")debería usarse en su lugar, porque en su caso si agrega una función de devolución de llamada, se llamará dos veces, una para html y otra para body . Y usar el cuerpo no hace nada.
flawyte

10
Parece que depende del navegador. en algunos, $ ('html') puede no hacer nada, por lo que debe usar ambos y cuidar la devolución de llamada activada dos veces.
commonpike

31

Utilizar este:

$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
    }

});

8

para esto puedes usar el método de devolución de llamada

body.animate({
      scrollTop:0
    }, 500, 
    function(){} // callback method use this space how you like
);

7

Intenta esto en su lugar:

var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
       body.animate({scrollTop :0}, 500,function(){
         //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
          alert('Hello');
      });
}

5

Solución simple:

desplazarse a cualquier elemento por ID o NOMBRE:

SmoothScrollTo("#elementId", 1000);

código:

function SmoothScrollTo(id_or_Name, timelength){
    var timelength = timelength || 1000;
    $('html, body').animate({
        scrollTop: $(id_or_Name).offset().top-70
    }, timelength, function(){
        window.location.hash = id_or_Name;
    });
}

' timelength ' ya se ha pasado como parámetro, por lo que no es necesario declararlo con 'var'. ¡No fue posible editar esta respuesta, ya que tenía menos de 6 caracteres! ;-) +1
Anthony Walsh

@AnthonyWalsh de ninguna manera afaik. vares necesario no sobrescribir la global (si existe una variable global con ese nombre)
T.Todua

Bastante justo ;-) Estoy usando TypeScript y pasando un número directamente como parámetro para la longitud de tiempo, por lo que todo el alcance local en mi caso. ¡Salud!
Anthony Walsh

4

Código con función de clic ()

    var body = $('html, body');

    $('.toTop').click(function(e){
        e.preventDefault();
        body.animate({scrollTop:0}, 500, 'swing');

}); 

.toTop= clase de elemento cliqueado tal vez imgoa


4
jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() { 
       alert("Finished animating");
    });

0

debes de ver esto

$(function () {
        $('a[href*="#"]:not([href="#"])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });

o pruébalos

$(function () {$('a').click(function () {
$('body,html').animate({
    scrollTop: 0
}, 600);
return false;});});

0
$("body").stop().animate({
        scrollTop: 0
    }, 500, 'swing', function () {
        console.log(confirm('Like This'))
    }
);

0

puedes usar tanto la clase CSS como la identificación HTML, para mantenerla simétrica siempre uso la clase CSS, por ejemplo

<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a> 
|
|
|
<section class="section-plans js--section-plans clearfix">
$(document).ready(function () {
    $('.js--scroll-to-plans').click(function () {
        $('body,html').animate({
            scrollTop: $('.js--section-plans').offset().top
        }, 1000);
        return false;})
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.