jQuery .scrollTop(); + Animation

Question

Ich stelle die Seite so ein, dass sie nach oben blättert, wenn auf eine Schaltfläche geklickt wird. Aber zuerst habe ich eine if-Anweisung verwendet, um zu sehen, ob der obere Rand der Seite nicht auf 0 gesetzt wurde. Wenn es nicht 0 ist, animiere ich die Seite, um nach oben zu scrollen.

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

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

Der schwierige Teil ist nun etwas zu animieren, nachdem die Seite nach oben gescrollt wurde. Also mein nächster Gedanke ist, herauszufinden, was die Seitenposition ist. Also habe ich das Konsolenprotokoll benutzt, um es herauszufinden.

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

Dies gab mir ein Ergebnis von 365, ich nehme an, dass die Position der Nummer I bei nur nach oben, bevor Scrollen war ist.

Meine Frage ist, wie setze ich die Position auf 0, so dass ich eine weitere Animation hinzufügen kann, die ausgeführt wird, sobald die Seite bei 0 ist?

Danke!

Answer 1

Um dies zu tun, können Sie eine Rückruffunktion für den Animate-Befehl festlegen, die ausgeführt wird, nachdem die Bildlaufanimation beendet wurde.

Zum Beispiel:

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

Wo der Alarm-Code ist, können Sie mehr Javascript ausführen in weiterer Animation hinzuzufügen.

Auch die 'Swing' ist da, um die Lockerung zu setzen. Check out http://api.jquery.com/animate/ für weitere Informationen.

Answer 2

für das Sie Callback-Methode

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

Answer 3

Versuchen Sie stattdessen verwenden können:

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 4

diesen Code Versuchen:

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

Answer 5

verwenden:

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

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

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

}); 

Answer 6

Code mit Klick-Funktion()

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

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

}); 

.toTop = Klasse geklickt Element vielleicht img oder a

Answer 7

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

Answer 8

Einfache Lösung:

auf ein beliebiges Element von ID oder Verschieben des Namens:

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