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!

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.

Prueba este código:

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

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

});

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

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

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

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

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

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

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

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