jQuery .scrollTop (); + Animation

171

Ich habe die Seite so eingestellt, dass sie nach oben rollt, wenn auf eine Schaltfläche geklickt wird. Aber zuerst habe ich eine if-Anweisung verwendet, um festzustellen, 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 besteht nun darin, etwas zu animieren, nachdem die Seite nach oben gescrollt hat. Mein nächster Gedanke ist also, herauszufinden, wie die Seitenposition ist. Also habe ich das Konsolenprotokoll verwendet, um es herauszufinden.

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

Dies ergab ein Ergebnis von 365, ich schätze, das ist die Positionsnummer, an der ich mich gerade befand, bevor ich nach oben gescrollt habe.

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

Vielen Dank!

Juan Di Diego
quelle
1
Wird es benötigt, dass die Schaltfläche, auf die Sie Ereignis auslösen, immer sichtbar ist? Wenn nicht, dann habe ich einen Code, der keine Bedingung benötigt, die für Ihre erste Bedingung einfach gemacht werden kann
The Mechanic
1
Es sollte keine Anführungszeichen um die Millisekunden geben. Die "Zeichenfolge", auf die sich die Dokumentation bezieht, ist die langsame / schnelle
mplungjan

Antworten:

313

Dazu können Sie eine Rückruffunktion für den Animationsbefehl festlegen, die nach Abschluss der Bildlaufanimation ausgeführt wird.

Beispielsweise:

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

Wo sich dieser Warncode befindet, können Sie mehr Javascript ausführen, um weitere Animationen hinzuzufügen.

Auch die "Schaukel" dient dazu, die Lockerung einzustellen. Weitere Informationen finden Sie unter http://api.jquery.com/animate/ .

TLS
quelle
1
Danke Thomas, das habe ich gebraucht. Ich habe auch eine Verzögerung hinzugefügt, da die Klasse so schnell hinzugefügt wird. if (top! = 0) {console.log ("versteckte Schriftrolle"); body.animate ({scrollTop: 0}, '500', 'Swing', function () {console.log ("Animation beendet"); leftitems.delay (1000) .removeClass ("slide");}); }
Juan Di Diego
5
Ich bin mir nicht sicher, ob es daran liegt, dass dieser Beitrag 4 Jahre alt ist, aber ich denke, in neueren Versionen von jQuery müssen Sie diese einfachen Anführungszeichen um das Timing herum entfernen: body.animate ({scrollTop: 0}, 500, 'Swing', function () {alert ("Animation beendet");});
Andrew
27
Ihr Rückruf wird übrigens zweimal ausgeführt, da Sie zwei Elemente ausgewählt haben.
Big McLargeHuge
8
Thomas hatte gute Gründe, Körper und HTML hinzuzufügen. Fall 1. Chrome Lesekörper und Rollen, FIrefox benötigt HTML, um dies zu tun.
Fearis
4
Gerade ausprobiert - $ ('html') funktioniert nicht in Chrome und $ ('body') funktioniert nicht in Firefox, daher wird $ ('html, body') benötigt. Und auch das Aufrufen von .stop () ist eine gute Sache - ich habe mehrmals versucht, animiert schnell in Chrome aufzurufen, und danach konnte ich die Seite nicht mehr nach unten scrollen.
Lev Lukomsky
54

Versuchen Sie diesen Code:

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
Shailesh
quelle
8
$("html")sollte stattdessen verwendet werden, da in Ihrem Fall eine Rückruffunktion zweimal aufgerufen wird, einmal für HTML und einmal für body . Und Körper benutzen macht nichts.
Fehler
10
es scheint, dass dies vom Browser abhängt. In einigen Fällen kann $ ('html') nichts bewirken, daher müssen Sie beide verwenden und sich um den zweimal ausgelösten Rückruf kümmern.
Commonpike
31

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

});
Signalton
quelle
8

Hierfür können Sie die Rückrufmethode verwenden

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

Versuchen Sie stattdessen Folgendes:

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

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;
    });
}
T.Todua
quelle
' timelength ' ist bereits als Parameter übergeben, sodass Sie ihn nicht mit 'var' deklarieren müssen. Eine 'Bearbeitung' dieser Antwort war nicht möglich, da sie weniger als 6 Zeichen umfasste! ;-) +1
Anthony Walsh
@AnthonyWalsh auf keinen Fall afaik. varwird benötigt, um die globale Variable nicht zu überschreiben (falls eine globale Variable mit diesem Namen vorhanden ist)
T.Todua
Fair genug ;-) Ich verwende TypeScript und übergebe eine Zahl direkt als Parameter für die Zeitlänge, also den gesamten lokalen Bereich in meinem Fall. Prost!
Anthony Walsh
4

Code mit Klickfunktion ()

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

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

}); 

.toTop= Klasse des angeklickten Elements vielleicht imgodera

Scorby
quelle
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");
    });
Junaid
quelle
0

Das musst du sehen

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

oder probieren Sie sie aus

$(function () {$('a').click(function () {
$('body,html').animate({
    scrollTop: 0
}, 600);
return false;});});
Remal Mahmud
quelle
0
$("body").stop().animate({
        scrollTop: 0
    }, 500, 'swing', function () {
        console.log(confirm('Like This'))
    }
);
Amanverma Lucky
quelle
0

Sie können sowohl die CSS-Klasse als auch die HTML-ID verwenden. Um sie symmetrisch zu halten, verwende ich beispielsweise immer die CSS-Klasse

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