Cara menggulir jendela menggunakan fungsi JQuery $ .scrollTo ()

98

Saya mencoba menggulir ke bawah 100px setiap kali pengguna mendekati bagian atas dokumen.

Saya memiliki fungsi yang dieksekusi ketika pengguna mendekati bagian atas dokumen, tetapi fungsi .scrollTo tidak berfungsi.

Saya memasang peringatan setelah dan sebelum untuk memeriksa apakah itu benar-benar garis atau tidak yang menghentikannya dan hanya peringatan pertama yang berbunyi, berikut kodenya:

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

Saya tahu saya memiliki halaman jquery yang ditautkan dengan benar karena saya menggunakan banyak fungsi jquery lainnya dan semuanya berfungsi dengan baik. Saya juga mencoba menghapus 'px' dari atas dan sepertinya tidak ada bedanya.

javascript jquery scroll scrollto
sumber
3
Jquery saya sendiri berfungsi dengan baik, tetapi apakah Anda yakin plugin scrollTo telah ditautkan dengan benar? Ubah salah satu dari alert tersebut menjadi alert ($. ScrollTo);
Andrew

Jawaban:

97

Jika tidak berhasil, mengapa Anda tidak mencoba menggunakan metode scrollTop jQuery? 

$("#id").scrollTop($("#id").scrollTop() + 100);

Jika Anda ingin menggulir dengan lancar, Anda dapat menggunakan fungsi javascript dasar setTimeout / setInterval untuk membuatnya menggulir dengan kelipatan 1px selama jangka waktu tertentu.

Fermin
sumber
8
Perhatikan jika Anda ingin menggulir seluruh halaman dan bukan elemen individual, gunakan $ ('html, body') seperti yang ditunjukkan Tim di sini. Hanya $ ('body') tidak akan berfungsi di semua browser.
i
321 
$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);
Mihai
sumber
19
Saya sering bertanya-tanya mengapa orang menggunakan 'html, body' untuk scrollTop, bukan hanya 'html'. Ada pemikiran tentang ini?
Scott Greenfield
+1 bekerja untuk saya;) Saya juga tertarik untuk mengetahui mengapa html, bodyalih - alih hanya html?
Kato
9
@ScottGreenfield, @Kato: tidak yakin mengapa, tetapi komentar ini mengatakan tidak termasuk bodyistirahat ini di Chrome 4: stackoverflow.com/questions/1890995/…
Yuji 'Tomita' Tomita
scrollTop: 0juga bekerja dengan baik. Tapi durasinya menurun. Berfungsi dengan baik jika kecepatan disetel 1000
shashwat
Ini adalah solusi yang bagus sampai Anda ingin menambahkan metode lengkap - ini akan dijalankan dua kali. Solusi @complistic lebih elegan, dan akan mencegahnya.
plankguy
41

jQuery sekarang mendukung scrollTop sebagai variabel animasi.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

Anda tidak perlu lagi setTimeout / setInterval untuk menggulir dengan lancar.

Todd
sumber
Mendapat beberapa kesalahan sintaks - penutupan Anda tidak ada {. Jika tidak, ini adalah poin yang bagus.
Joshua
1
Haruskah demikian $("#id").offset().top?
codeulike
15

Untuk mengatasi masalah htmlvs body, saya memperbaikinya dengan tidak menganimasikan 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 bekerja dengan baik tanpa ada penyegaran karena menggunakan JavaScript lintas browser.

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

sombong
sumber
1
Ini brilian. Aku hanya mengubah window.pageYOffsetke $(window).scrollTop()dan window.scrollTo(0, val)untuk $(window).scrollTop(val)jadi saya tidak perlu khawatir tentang kompatibilitas browser.
leftclickben
1
Saya tidak pernah berpikir untuk mengirimkan objek ke metode animasi jQuery seperti itu. Begitu banyak kemungkinan kegunaannya. Solusi ini bagus, terima kasih.
Synexis
Ya, teknik merupakan kontribusi yang signifikan. Sebelumnya mengatasi masalah browser dengan menggunakan "window.scrollTo ()" secara langsung, tapi itu tidak memungkinkan untuk panggilan balik "lengkap", atau janji. Terima kasih @complistic untuk solusi ini. Juga, terima kasih saya kepada @leftclickben; Saya mengimplementasikan variasinya menggunakan ".scrollTop ()". Selain itu, artikel "james.padolsey", per tautan, adalah bacaan singkat dan sangat berharga.
IAM_AL_X
Menurut saya, "window.scrollTo ()" harus kompatibel dengan semua browser modern.
IAM_AL_X
7

Sepertinya sintaks Anda sedikit salah ... Saya berasumsi berdasarkan kode Anda bahwa Anda mencoba menggulir ke bawah 100px dalam 800ms, jika demikian maka ini berfungsi (menggunakan scrollTo 1.4.1):

$.scrollTo('+=100px', 800, { axis:'y' });
Alconja
sumber
6

Sebenarnya seperti itu

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

akan bekerja dengan baik dan mendukung bantalan. Anda juga dapat mendukung margin dengan mudah - untuk penyelesaiannya lihat di bawah

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}
Tim
sumber