it-swarm.com.de

jQuery .scrollTop (); + Animation

Ich habe die Seite so eingestellt, dass beim Klicken auf eine Schaltfläche nach oben geblättert wird. Aber zuerst habe ich eine if -Anweisung verwendet, um zu sehen, ob der Anfang der Seite nicht auf 0 gesetzt wurde.

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

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

Der knifflige Teil animiert jetzt etwas, nachdem die Seite nach oben gescrollt wurde. Mein nächster Gedanke ist also herauszufinden, wie die Seitenposition ist. Also habe ich Konsolenprotokoll verwendet, um das herauszufinden.

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

Dies gab mir ein Ergebnis von 365, ich denke, das ist die Positionsnummer, die ich kurz vor dem Scrollen nach oben hatte.

Meine Frage ist, wie kann ich die Position auf 0 setzen, damit ich eine weitere Animation hinzufügen kann, die ausgeführt wird, sobald die Seite auf 0 steht?

Vielen Dank!

157
Juan Di Diego

Zu diesem Zweck können Sie eine Rückruffunktion für den animierten Befehl festlegen, die ausgeführt wird, nachdem die Bildlaufanimation abgeschlossen ist.

Zum Beispiel:

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

Wo der Alarmcode ist, können Sie mehr Javascript ausführen, um weitere Animationen hinzuzufügen.

Die "Schaukel" dient auch dazu, die Lockerung einzustellen. Check out http://api.jquery.com/animate/ für weitere Informationen.

281
Thomas Stiegler

Versuchen Sie diesen Code:

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

Benutze das: 

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

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

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

});
26
Beep

Versuchen Sie es stattdessen:

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

dafür können Sie die Callback-Methode verwenden

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

Code mit Klickfunktion ()

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

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

}); 

.toTop = Klasse des angeklickten Elements möglicherweise img oder a

3
Scorby

Einfache Lösung:

scrollen zu einem beliebigen Element nach ID oder NAME:

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;
    });
}
1
T.Todua
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
Junaid