jQuery .scrollTop(); + animation

Question

J'ai mis la page pour faire défiler vers le haut lorsque l'on clique sur un bouton. Mais d'abord, j'ai utilisé une instruction if pour voir si le haut de la page n'a pas été mis à 0. Alors si ce n'est pas 0 I animer la page, faites 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 la plus délicate est maintenant animer quelque chose APRÈS la page défile vers le haut. Donc ma prochaine pensée est, savoir ce que la position de la page. J'ai donc utilisé du 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, j'étais à un peu avant de défilement vers le haut.

Ma question est comment puis-je définir la position à 0, de sorte que je peux ajouter une autre animation qui s'exécute une fois que la page est à 0?

Merci!

Answer 1

Pour ce faire, vous pouvez définir une fonction de rappel pour l'animer de commande qui sera exécuté après le défilement de l'animation est terminée.

Par exemple:

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

Où que l'alerte de code, vous pouvez exécuter javascript à ajouter en plus de l'animation.

Aussi, le "swing" est là pour définir l'assouplissement. Découvrez http://api.jquery.com/animate/ pour plus d'info.

Answer 2

Essayez ce code:

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

Answer 3

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

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

Answer 4

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

Answer 5

Essayez cette Méthode

    private void SubirTelaTopo()
    {
        StringBuilder csText = new StringBuilder();
        csText.Append("$('body,html').animate({ scrollTop: 0 }, 500);");
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), Guid.NewGuid().ToString(), csText.ToString(), true);
    }