J'ai configuré la page pour qu'elle défile vers le haut lorsqu'un bouton est cliqué. Mais j'ai d'abord utilisé une instruction if pour voir si le haut de la page n'était pas défini sur 0. Ensuite, si ce n'est pas 0, j'anime la page pour faire défiler vers le haut.

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

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

La partie délicate consiste maintenant à animer quelque chose APRÈS que la page ait défilé vers le haut. Ma prochaine pensée est donc de savoir quelle est la position de la page. J'ai donc utilisé le journal de la console pour le savoir.

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

Cela m'a donné un résultat de 365, je suppose que c'est le numéro de position où j'étais juste avant de faire défiler vers le haut.

Ma question est de savoir comment définir la position sur 0, afin de pouvoir ajouter une autre animation qui s'exécute une fois que la page est à 0?

Merci!

Pour ce faire, vous pouvez définir une fonction de rappel pour la commande d'animation qui s'exécutera une fois l'animation de défilement terminée.

Par exemple:

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

Où se trouve ce code d'alerte, vous pouvez exécuter plus de javascript pour ajouter une animation supplémentaire.

En outre, le «swing» est là pour régler l'assouplissement. Consultez http://api.jquery.com/animate/ pour plus d'informations.

Essayez ce code:

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

Utilisez ceci:

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

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

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

});

pour cela, vous pouvez utiliser la méthode de rappel

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

Essayez plutôt ceci:

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

Solution simple:

faire défiler jusqu'à n'importe quel élément par ID ou NOM:

SmoothScrollTo("#elementId", 1000);

code:

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

Code avec fonction clic ()

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

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

}); 

.toTop= classe d'élément cliqué peut img- être oua

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

tu dois voir ça

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

ou essayez-les

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

vous pouvez utiliser à la fois la classe CSS ou l'identifiant HTML, pour le garder symétrique, j'utilise toujours la classe CSS par exemple

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