jQuery .scrollTop (); + animation


172

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!


1
il est nécessaire que le bouton sur lequel vous déclenchez l'événement toujours visible? Sinon, j'ai un code qui n'a besoin d'aucune condition, ce qui peut être fait facilement pour votre première condition
The Mechanic

1
Il ne devrait pas y avoir de guillemets autour des millisecondes. La "chaîne" à laquelle la documentation se réfère est la lente / rapide
mplungjan

Réponses:


314

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.


1
Merci Thomas, c'est ce dont j'avais besoin. J'ai également ajouté un délai puisque la classe est ajoutée si rapidement. if (top! = 0) {console.log ("défilement caché"); body.animate ({scrollTop: 0}, '500', 'swing', function () {console.log ("Animation terminée"); leftitems.delay (1000) .removeClass ("slide");}); }
Juan Di Diego

5
Je ne sais pas si c'est parce que cet article a 4 ans, mais je pense que dans les nouvelles versions de jQuery, vous devez supprimer ces guillemets simples autour du timing: body.animate ({scrollTop: 0}, 500, 'swing', function () {alert ("Animation terminée");});
Andrew

27
Votre rappel s'exécutera deux fois, soit dit en passant, car vous avez sélectionné deux éléments.
Big McLargeHuge

8
Thomas avait un bon point d'ajouter du corps et du html. Cas 1. Corps de lecture Chrome et srolling, FIrefox a besoin de HTML pour le faire.
craint le

4
Juste essayé - $ ('html') ne fonctionne pas dans Chrome et $ ('body') ne fonctionne pas dans Firefox, donc $ ('html, body') est nécessaire. Et aussi appeler .stop () est une bonne chose - j'ai essayé d'appeler animate plusieurs fois rapidement dans Chrome et après cela, je ne pouvais pas faire défiler la page.
Lev Lukomsky

55

Essayez ce code:

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

8
$("html")devrait être utilisé à la place, car dans votre cas, si vous ajoutez une fonction de rappel, elle sera appelée deux fois, une fois pour html et une fois pour body . Et utiliser le corps ne fait rien.
flawyte

10
il semble que cela dépend du navigateur. dans certains, $ ('html') peut ne rien faire, vous devez donc utiliser les deux et prendre en charge le rappel déclenché deux fois.
commonpike

31

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

});

8

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

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

7

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

5

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

' timelength ' est déjà passé en paramètre donc pas besoin de le déclarer avec 'var'. Une 'modification' de cette réponse n'était pas possible, car elle était inférieure à 6 caractères! ;-) +1
Anthony Walsh

@AnthonyWalsh pas moyen afaik. varest nécessaire pour ne pas écraser la variable globale (s'il existe une variable globale avec ce nom)
T.Todua

Assez juste ;-) J'utilise TypeScript et je passe un nombre directement en tant que paramètre pour la durée, donc toute la portée locale dans mon cas. À votre santé!
Anthony Walsh

4

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


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

0

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

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

0

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;})
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.