jQuery .scrollTop (); + animación

Configuro la página para desplazarme hacia arriba cuando se hace clic en un botón. Pero primero usé una statement if para ver si la parte superior de la página no estaba configurada en 0. Entonces, si no es 0, animo la página para desplazarme a 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 siguiente pensamiento es, averiguar cuál es la posición de la página. Así que utilicé el registro de la consola para averiguarlo.

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

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

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

¡Gracias!

Para hacer esto, puede establecer una función de callback 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 ese código de alerta es, puede ejecutar más javascript para agregar más animaciones.

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

Prueba este código:

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

Utilizar esta:

 $('a[href^="#"]').on('click', function(event) { var target = $( $(this).attr('href') ); if( target.length ) { event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 500); } }); 

Pruebe 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'); }); } 

para esto puedes usar el método de callback

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

Código con la función de hacer clic ()

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

.toTop = clase de elemento .toTop tal vez img o a

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

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; }); } 

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;});});