Ist es möglich, scrollTop mit jQuery zu animieren?

Ich möchte reibungslos nach unten scrollen. Ich möchte dafür keine Funktion schreiben müssen - besonders wenn jQuery bereits eine hat.

Sie können .animate()die scrollTopEigenschaft einfach wie folgt verwenden:

$("html, body").animate({ scrollTop: "300px" });

Nicks Antwort funktioniert großartig. Seien Sie vorsichtig, wenn Sie eine vollständige () Funktion im animate () -Aufruf angeben, da diese zweimal ausgeführt wird, da zwei Selektoren deklariert sind (HTML und Body).

$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            alert('this alert will popup twice');
        }
    }
);

So können Sie den doppelten Rückruf vermeiden.

var completeCalled = false;
$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            if(!completeCalled){
                completeCalled = true;
                alert('this alert will popup once');
            }
        }
    }
);

Nicks Antwort funktioniert hervorragend und die Standardeinstellungen sind nett, aber Sie können das Scrollen besser steuern, indem Sie alle optionalen Einstellungen vornehmen.

So sieht es in der API aus:

.animate( properties [, duration] [, easing] [, complete] )

Sie könnten also so etwas tun:

.animate( 
    {scrollTop:'300px'},
    300,
    swing,
    function(){ 
       alert(animation complete! - your custom code here!); 
       } 
    )

Hier ist die API-Seite der jQuery .animate-Funktion: http://api.jquery.com/animate/

Wie Kita bereits erwähnt hat, gibt es ein Problem mit mehreren Rückrufen, die ausgelöst werden, wenn Sie sowohl auf "HTML" als auch auf "Body" animieren. Anstatt beide zu animieren und nachfolgende Rückrufe zu blockieren, bevorzuge ich die Erkennung grundlegender Funktionen und animiere nur die scrollTop-Eigenschaft eines einzelnen Objekts.

Die akzeptierte Antwort in diesem anderen Thread gibt einen Einblick in die scrollTop-Eigenschaft des Objekts, die wir animieren sollten: pageYOffset Scrolling and Animation in IE8

// UPDATE: don't use this... see below
// only use 'body' for IE8 and below
var scrollTopElement = (window.pageYOffset != null) ? 'html' : 'body';

// only animate on one element so our callback only fires once!
$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

UPDATE - - -

Der obige Versuch zur Feature-Erkennung schlägt fehl. Es scheint, als gäbe es keine einzeilige Möglichkeit, dies zu tun, da die pageYOffset-Eigenschaft eines Browsers vom Typ Webkit immer Null zurückgibt, wenn ein Doctype vorhanden ist. Stattdessen habe ich einen Weg gefunden, ein Versprechen zu verwenden, um bei jeder Ausführung der Animation einen einzelnen Rückruf durchzuführen.

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

Ich habe das, was ich für eine bessere Lösung $('html, body')halte als den Hack.

Es ist kein Einzeiler, aber das Problem, das ich hatte, $('html, body')ist, dass wenn Sie sich $(window).scrollTop()während der Animation anmelden , Sie sehen, dass der Wert überall springt, manchmal um Hunderte von Pixeln (obwohl ich so etwas nicht sehe visuell geschehen). Der Wert musste vorhersehbar sein, damit ich die Animation abbrechen konnte, wenn der Benutzer während des automatischen Bildlaufs die Bildlaufleiste ergriff oder das Mausrad drehte.

Hier ist eine Funktion, die das reibungslose Scrollen animiert:

function animateScrollTop(target, duration) {
    duration = duration || 16;
    var scrollTopProxy = { value: $(window).scrollTop() };
    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target }, 
            { duration: duration, step: function (stepValue) {
                var rounded = Math.round(stepValue);
                $(window).scrollTop(rounded);
            }
        });
    }
}

Im Folgenden finden Sie eine komplexere Version, mit der die Animation bei Benutzerinteraktion abgebrochen und erneut ausgelöst wird, bis der Zielwert erreicht ist. Dies ist hilfreich, wenn Sie versuchen, das scrollTop sofort festzulegen (z. B. einfach aufrufen $(window).scrollTop(1000)- meiner Erfahrung nach funktioniert dies nicht 50% der Zeit.)

function animateScrollTop(target, duration) {
    duration = duration || 16;

    var $window = $(window);
    var scrollTopProxy = { value: $window.scrollTop() };
    var expectedScrollTop = scrollTopProxy.value;

    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target },
            {
                duration: duration,

                step: function (stepValue) {
                    var roundedValue = Math.round(stepValue);
                    if ($window.scrollTop() !== expectedScrollTop) {
                        // The user has tried to scroll the page
                        $(scrollTopProxy).stop();
                    }
                    $window.scrollTop(roundedValue);
                    expectedScrollTop = roundedValue;
                },

                complete: function () {
                    if ($window.scrollTop() != target) {
                        setTimeout(function () {
                            animateScrollTop(target);
                        }, 16);
                    }
                }
            }
        );
    }
}

Ich hatte Probleme, bei denen die Animation nach einer Seitenaktualisierung in den anderen Beispielen immer oben auf der Seite begann.

Ich habe dies behoben, indem ich das CSS nicht direkt animiert habe, sondern window.scrollTo();jeden Schritt aufgerufen habe :

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Dies umgeht auch das htmlvs- bodyProblem, da es browserübergreifendes JavaScript verwendet.

Werfen Sie einen Blick auf http://james.padolsey.com/javascript/fun-with-jquerys-animate/ für weitere Informationen darüber , was Sie mit jQuery animieren Funktion tun können.

Sie können die jQuery-Animation für Bildlaufseiten mit einer bestimmten Dauer verwenden:

$("html, body").animate({scrollTop: "1024px"}, 5000);

Dabei ist 1024px der Bildlaufversatz und 5000 die Dauer der Animationen in Millisekunden.

Probieren Sie das scrollTo- Plugin aus.

$(".scroll-top").on("click", function(e){
   e.preventDefault();
   $("html, body").animate({scrollTop:"0"},600);
});

Wenn Sie am Ende der Seite nach unten gehen möchten (damit Sie nicht nach unten scrollen müssen), können Sie Folgendes verwenden:

$('body').animate({ scrollTop: $(document).height() });

Wenn Sie jedoch beim Scrollen wirklich Animationen hinzufügen möchten, können Sie mein einfaches Plugin ( AnimateScroll ) ausprobieren, das derzeit mehr als 30 Beschleunigungsstile unterstützt

Der browserübergreifende Code lautet:

$(window).scrollTop(300); 

Es ist ohne Animation, funktioniert aber überall