Ho impostato la pagina per scorrere verso l'alto quando si fa clic su un pulsante. Ma prima ho usato un'istruzione if per vedere se la parte superiore della pagina non era impostata su 0. Quindi, se non è 0, anima la pagina per scorrere verso l'alto.

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

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

La parte difficile ora è animare qualcosa DOPO che la pagina è stata spostata in alto. Quindi il mio prossimo pensiero è, scoprire qual è la posizione della pagina. Quindi ho usato il registro della console per scoprirlo.

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

Questo mi ha dato un risultato di 365, suppongo che sia il numero di posizione in cui mi trovavo poco prima di scorrere verso l'alto.

La mia domanda è come impostare la posizione su 0, in modo da poter aggiungere un'altra animazione che viene eseguita una volta che la pagina è a 0?

Grazie!

Per fare ciò, è possibile impostare una funzione di callback per il comando animato che verrà eseguito al termine dell'animazione di scorrimento.

Per esempio:

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

Dove si trova quel codice di avviso, è possibile eseguire più javascript per aggiungere ulteriori animazioni.

Inoltre, lo 'swing' è lì per impostare l'allentamento. Controlla http://api.jquery.com/animate/ per maggiori informazioni.

Prova questo codice:

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

Usa questo:

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

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

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

});

per questo è possibile utilizzare il metodo di callback

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

Prova questo invece:

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

Soluzione semplice:

scorrendo verso qualsiasi elemento per ID o NAME:

SmoothScrollTo("#elementId", 1000);

codice:

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

Codice con funzione click ()

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

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

}); 

.toTop= classe dell'elemento cliccato forse 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");
    });

devi vedere questo

$(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 provali

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

puoi usare sia la classe CSS che l'ID HTML, per mantenerlo simmetrico uso sempre la classe CSS per esempio

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