Czy można animować scrollTop za pomocą jQuery?

Chcę płynnie przewijać w dół. Nie chcę do tego pisać funkcji - szczególnie jeśli jQuery już ją ma.

Możesz po prostu skorzystać z .animate()tej scrollTopwłaściwości:

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

Odpowiedź Nicka działa świetnie. Zachowaj ostrożność przy określaniu funkcji complete () wewnątrz wywołania animate (), ponieważ zostanie ona wykonana dwukrotnie, ponieważ zadeklarowano dwa selektory (html i body).

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

Oto jak uniknąć podwójnego oddzwaniania.

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

Odpowiedź Nicka działa świetnie, a ustawienia domyślne są dobre, ale możesz pełniej kontrolować przewijanie, wykonując wszystkie ustawienia opcjonalne.

oto jak to wygląda w interfejsie API:

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

więc możesz zrobić coś takiego:

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

tutaj jest strona interfejsu API funkcji jQuery .animate: http://api.jquery.com/animate/

Jak wspomniała Kita, istnieje problem z uruchamianiem wielu wywołań zwrotnych, gdy animujesz zarówno „html”, jak i „body”. Zamiast animować oba i blokować kolejne wywołania zwrotne, wolę użyć niektórych podstawowych funkcji wykrywania i animować tylko właściwość scrollTop pojedynczego obiektu.

Zaakceptowana odpowiedź w tym drugim wątku daje pewien wgląd w właściwość scrollTop obiektu, którą powinniśmy spróbować animować: pageYOffset Scrolling and Animation w 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...
    })
});

AKTUALIZACJA - - -

Powyższa próba wykrycia funkcji kończy się niepowodzeniem. Wygląda na to, że nie ma jednego wiersza sposobu, ponieważ właściwość pageYOffset w przeglądarkach typu webkit zawsze zwraca zero, gdy występuje typ dokumentu. Zamiast tego znalazłem sposób na skorzystanie z obietnicy wykonania pojedynczego wywołania zwrotnego za każdym razem, gdy animacja zostanie wykonana.

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

Mam coś, co uważam za lepsze rozwiązanie niż $('html, body')hack.

Nie jest to jedna linijka, ale miałem problem z $('html, body')tym, że jeśli zalogujesz się $(window).scrollTop()podczas animacji, zobaczysz, że wartość przeskakuje wszędzie, czasem o setki pikseli (chociaż nie widzę czegoś takiego dzieje się wizualnie). Potrzebowałem, aby wartość była przewidywalna, aby móc anulować animację, jeśli użytkownik złapie pasek przewijania lub zakręci kółko myszy podczas automatycznego przewijania.

Oto funkcja sprawnie animująca przewijanie:

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

Poniżej znajduje się bardziej złożona wersja, która anuluje animację podczas interakcji użytkownika, a także odświeża ją aż do osiągnięcia wartości docelowej, co jest przydatne, gdy próbujesz ustawić scrollTop natychmiast (np. Po prostu dzwoniąc $(window).scrollTop(1000)- z mojego doświadczenia, to nie działa 50% czasu.)

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

Miałem problemy, w których animacja zawsze zaczynała się od góry strony po odświeżeniu strony w innych przykładach.

Naprawiłem to, nie animując bezpośrednio css, ale raczej wzywając window.scrollTo();na każdym kroku:

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

To również htmlomija bodyproblem vs, ponieważ używa JavaScript w przeglądarce.

Zajrzyj na http://james.padolsey.com/javascript/fun-with-jquerys-animate/, aby uzyskać więcej informacji o tym, co możesz zrobić z funkcją animacji jQuery.

Możesz użyć animacji jQuery do przewijania strony o określonym czasie trwania:

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

gdzie 1024px to przesunięcie przewijania, a 5000 to czas trwania animacji w milisekundach.

Wypróbuj wtyczkę scrollTo .

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

Jeśli chcesz przejść na koniec strony (nie musisz przewijać w dół), możesz użyć:

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

Ale jeśli naprawdę chcesz dodać animację podczas przewijania, możesz wypróbować moją prostą wtyczkę ( AnimateScroll ), która obecnie obsługuje ponad 30 stylów łagodzenia

kod przeglądarki jest następujący:

$(window).scrollTop(300); 

jest bez animacji, ale działa wszędzie