JQuery ile scrollTop'u canlandırmak mümkün mü?

Düzgün aşağı kaydırmak istiyorum. Özellikle jQuery zaten bir tane varsa, bunun için bir işlev yazmak istemiyorum.

Sadece kullanabilirsiniz Böyle özelliği,:.animate()scrollTop

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

Nick'in cevabı harika çalışıyor. Animate () çağrısının içinde bir complete () işlevi belirtirken dikkatli olun çünkü iki seçiciniz (html ve body) bildirildiğinden iki kez yürütülür.

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

Çift geri aramayı nasıl önleyeceğiniz aşağıda açıklanmıştır.

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

Nick'in cevabı harika çalışıyor ve varsayılan ayarlar güzel, ancak isteğe bağlı tüm ayarları tamamlayarak kaydırma işlemini daha iyi kontrol edebilirsiniz.

API'da şöyle görünür:

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

böylece böyle bir şey yapabilirsiniz:

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

jQuery .animate işlevi api sayfası: http://api.jquery.com/animate/

Kita'nın belirttiği gibi, hem 'html' hem de 'gövde' üzerine animasyon uyguladığınızda çoklu geri aramaların tetiklenmesiyle ilgili bir sorun var. Her ikisini de canlandırmak ve sonraki geri aramaları engellemek yerine, bazı temel özellik algılamayı kullanmayı ve yalnızca tek bir nesnenin scrollTop özelliğini canlandırmayı tercih ederim.

Bu diğer iş parçacığındaki kabul edilen yanıt, hangi nesnenin canlandırmaya çalışmamız gerektiğine dair bir fikir verir: IE8'de pageYOffset Kaydırma ve Animasyon

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

GÜNCELLEME - - -

Yukarıdaki özellik algılama denemesi başarısız olur. Görünüşe göre webkit tipi tarayıcılar pageYOffset özelliği her zaman bir doctype olduğunda sıfıra döner gibi bunu yapmak için tek satır bir yolu yoktur. Bunun yerine, animasyonun her yürütülmesi için tek bir geri arama yapmak için bir söz vermenin bir yolunu buldum.

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

$('html, body')Saldırıdan daha iyi bir çözüm olduğuna inandığım şey var .

Tek astar değil, ama yaşadığım sorun $('html, body'), eğer giriş yaparsanız$(window).scrollTop() , animasyon sırasında açarsanız, değerin her yere, bazen yüzlerce piksele atladığını göreceksiniz (ancak böyle bir şey görmüyorum) görsel olarak oluyor). Otomatik kaydırma sırasında kullanıcı kaydırma çubuğunu yakaladığında veya fare tekerleğini döndürdüğünde animasyonu iptal edebilmem için değerin öngörülebilir olması gerekiyordu.

İşte düzgün kaydırma kaydırma bir fonksiyon:

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

Aşağıda anında scrollTop ayarları yapmaya çalışırken yararlıdır ulaşıldığında kullanıcı etkileşimine animasyonu iptal yanı sıra hedef değeri kadar görülen islenmeden edecek daha karmaşık bir versiyonudur (örneğin basitçe çağırarak $(window).scrollTop(1000)- Tecrübelerime göre bu konuda çalışmaları başarısız Zamanın% 50'si.)

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

Diğer örneklerde sayfa yenilendikten sonra animasyonun her zaman sayfanın üstünden başladığı sorunlar yaşıyordum.

Ben doğrudan css animasyon değil, daha ziyade window.scrollTo();her adımda arayarak bu düzeltildi :

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

Bu, tarayıcılar arası JavaScript kullandığından htmlvs bodysorununu da giderir.

JQuery'nin animasyon işlevi ile yapabilecekleriniz hakkında daha fazla bilgi için http://james.padolsey.com/javascript/fun-with-jquerys-animate/ adresine bakın .

Belirli bir süreye sahip kaydırma sayfası için jQuery animasyonunu kullanabilirsiniz:

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

burada 1024px, kaydırma ofseti ve 5000, animasyonların milisaniye cinsinden süresidir.

ScrollTo eklentisini deneyin .

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

Sayfanın sonunda aşağı doğru hareket etmek istiyorsanız (aşağıya kaydırmanıza gerek yoktur), şunları kullanabilirsiniz:

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

Ancak, kaydırma yaparken gerçekten biraz animasyon eklemek istiyorsanız, şu anda 30'dan fazla hareket hızı stilini destekleyen basit eklentimi ( AnimateScroll ) deneyebilirsiniz

çapraz tarayıcı kodu:

$(window).scrollTop(300); 

animasyon olmadan ama her yerde çalışıyor