Apakah mungkin untuk menghidupkan scrollTop dengan jQuery?

Saya ingin menggulir ke bawah dengan lancar. Saya tidak ingin harus menulis fungsi untuk itu - terutama jika jQuery sudah memilikinya.

Anda hanya dapat menggunakan .animate()satu scrollTopproperti, seperti ini:

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

Jawaban Nick sangat bagus. Hati-hati saat menentukan fungsi lengkap () di dalam panggilan animate () karena akan dieksekusi dua kali karena Anda memiliki dua pemilih yang dinyatakan (html dan badan).

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

Inilah cara Anda dapat menghindari panggilan balik ganda.

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

Jawaban Nick berfungsi dengan baik dan pengaturan standarnya bagus, tetapi Anda dapat lebih mengontrol gulir dengan menyelesaikan semua pengaturan opsional.

di sini terlihat seperti apa di API:

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

sehingga Anda dapat melakukan sesuatu seperti ini:

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

di sini adalah halaman api fungsi jQuery .animate: http://api.jquery.com/animate/

Seperti Kita sebutkan ada masalah dengan beberapa panggilan balik yang diaktifkan ketika Anda menghidupkan baik 'html' dan 'tubuh'. Alih-alih menggerakkan keduanya dan memblokir panggilan balik berikutnya, saya lebih suka menggunakan beberapa deteksi fitur dasar dan hanya menggerakkan properti scrollTop dari satu objek.

Jawaban yang diterima di utas lain ini memberikan beberapa wawasan mengenai properti scrollTop objek mana yang harus kita coba untuk menghidupkan: 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...
    })
});

PEMBARUAN - - -

Upaya deteksi fitur di atas gagal. Sepertinya tidak ada cara satu-line untuk melakukannya sebagai halaman web jenis peramban webKetika properti selalu kembali nol ketika ada DOCTYPE. Sebaliknya, saya menemukan cara untuk menggunakan janji untuk melakukan panggilan balik tunggal untuk setiap kali animasi dijalankan.

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

Saya memiliki apa yang saya yakini sebagai solusi yang lebih baik daripada $('html, body')retas.

Ini bukan one-liner, tetapi masalah yang saya miliki $('html, body')adalah bahwa jika Anda login$(window).scrollTop() selama animasi, Anda akan melihat bahwa nilainya melonjak di semua tempat, kadang-kadang oleh ratusan piksel (meskipun saya tidak melihat hal seperti itu) terjadi secara visual). Saya membutuhkan nilainya agar dapat diprediksi, sehingga saya dapat membatalkan animasi jika pengguna meraih bilah gulir atau memutar roda mouse selama gulir otomatis.

Berikut adalah fungsi yang akan menghidupkan gulir dengan lancar:

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

Di bawah ini adalah versi yang lebih kompleks yang akan membatalkan animasi pada interaksi pengguna, serta memperbarui hingga nilai target tercapai, yang berguna ketika mencoba untuk mengatur scrollTop secara instan (misalnya hanya memanggil $(window).scrollTop(1000)- dalam pengalaman saya, ini gagal untuk bekerja tentang 50% dari waktu.)

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

Saya mengalami masalah di mana animasi selalu dimulai dari bagian atas halaman setelah refresh halaman dalam contoh lain.

Saya memperbaikinya dengan tidak menghidupkan css secara langsung tetapi memanggil window.scrollTo();setiap langkah:

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

Ini juga mengatasi masalah htmlvs bodykarena menggunakan JavaScript lintas-browser.

Lihatlah http://james.padolsey.com/javascript/fun-with-jquerys-animate/ untuk informasi lebih lanjut tentang apa yang dapat Anda lakukan dengan fungsi bernyawa jQuery.

Anda dapat menggunakan animasi jQuery untuk halaman gulir dengan durasi tertentu:

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

di mana 1024px adalah offset gulir dan 5000 adalah durasi animasi dalam milidetik.

Coba plugin scrollTo .

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

Jika Anda ingin pindah ke bagian bawah halaman (sehingga Anda tidak perlu menggulir ke bawah), Anda dapat menggunakan:

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

Tetapi jika Anda benar-benar ingin menambahkan beberapa animasi saat menggulir, Anda dapat mencoba plugin sederhana saya ( AnimateScroll ) yang saat ini mendukung lebih dari 30 gaya pelonggaran

kode lintas browser adalah:

$(window).scrollTop(300); 

itu tanpa animasi tetapi bekerja di mana-mana