jQuery Kaydırma Sayfanın en altına

198

Sayfam yüklendikten sonra. JQUery'nin sayfanın en altına kaydırmasını ve hızlıca animasyon yapmasını, bir çırpıda / sarsıntıda olmasını istemiyorum.

Bunun ScrollToiçin bir eklentiye ihtiyacım var mı? ya da bu jQuery içine nasıl?

jquery jquery-plugins

— Bir çırak
kaynak

418

scrollTopÖzelliği canlandırarak sayfayı aşağı kaydırmak için animasyon uygulayabilirsiniz , eklenti gerekmez, şöyle:

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Bunun yerine window.onload(görüntüler yüklendiğinde ... yüksekliği kaplayan) kullanımına dikkat edin document.ready.

Teknik olarak doğru olmak için, pencerenin yüksekliğini çıkarmanız gerekir, ancak yukarıdakiler çalışır:

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

Belirli bir kimliğe gitmek için, kimliğini aşağıdaki gibi kullanın .scrollTop():

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);

— Nick Craver
kaynak

2

Başka bir sorun, bittiğinde ve daha sonra kullanıcı azarlamak için trys, biraz kilitlendi ve kullanıcının yukarı

— kaymasını

1

@AnApprentice - Bunun nedeni hızlı bir şekilde gerçekleşmesi (varsayılan olarak 400 ms), bu sorunu hafifletmek için sadece hızlı bir kaydırma tavsiye ederim.

— Nick Craver

3

Kilit, mesafenin kapalı olmasından kaynaklanmaktadır. Görünür animasyonu geçmişte canlandırıyor.

— Josiah Ruddell

28

@NickCraver - jQuery .scrollTop () 'in en son sürümüyle belirli bir kimliğe geçmek için çalışmıyor gibi görünüyor; .offset () ile üst çalışması gerekir: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);

— Paolo Gibellini

3

Bu cevabın düzenlenmesi gerekiyor. mülkiyet $(document).height()için çok büyük bir değer scrollTopolduğunu, hafifleterek fark edebilirsiniz. Bence iyi $(document).height() - window.innerHeightolmalı.

— silvenon

23

böyle bir şey:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);

— Josiah Ruddell
kaynak

Hedefi .write-comment olarak güncellemeyi denedim ve işe yaramadı. Belki de bu sayfaya enjekte edildiği için?

— AnApprentice

16

$('html,body').animate({ scrollTop: 9999 }, 'slow');

Bu kadar basit, 9999 sayfa yüksekliği ... aşağıya ulaşabilmesi için geniş aralık.

— Alin Razvan
kaynak

1

Bu, bazı durumlarda, nadir de olsa, özel olarak sınırsız içerik dinamik olarak yükleyen sayfalar olabileceğinden, mükemmel değildir. Bu kaydırma ilerlemesini durdurur.

— Akhil Gupta

13

Bunu deneyebilirsin

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});

— Sarath Ak
kaynak

10

$("div").scrollTop(1000);

Benim için çalışıyor. En alta kaydırır.

— F123
kaynak

13

Sayfanız 1000 pikselden uzunsa değil.

— Volomike

4

Önceki yanıtlarda bahsedilen komut dosyaları, örneğin:

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

işe yaramaz içinde Chrome ve ürkek olacak Safari durumda html etiketinin CSS vardır overflow: auto;mülkiyet seti. Anlamak yaklaşık bir saatimi aldı.

— Ilia Rostovtsev
kaynak

3

'Document.body.clientHeight' komutunu kullanarak gövde öğelerinin yüksekliğini görebilirsiniz

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

bu 'özelDivision' kimliğinde kayar

— Anbu
kaynak

1

JQuery 3 için, lütfen değiştirin

$ (window) .load (function () {$ ("html, body"). animate ({scrollTop: $ (belge) .height ()}, 1000);})

için:

$ (window) .on ("yükleme", işlev (e) {$ ("html, gövde"). animate ({scrollTop: $ (belge) .height ()}, 1000);})

— Adnan Tahir
kaynak

1

function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

Bu benden çözüm işi ve buldun, eminim

— Roshan Madusanka
kaynak

0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;

— codeskyblue
kaynak

Bu kod sorunu çözmeye yardımcı olsa da , soruyu neden ve / veya nasıl cevapladığını açıklamaz . Bu ek bağlamın sağlanması, uzun vadeli eğitim değerini önemli ölçüde artıracaktır. Hangi sınırlamalar ve varsayımlar dahil olmak üzere açıklama eklemek için lütfen yanıtınızı düzenleyin .

— Toby Speight

0

$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Bu çözüm benim için çalıştı. Sayfa Aşağı Kaydırma bölümünde hızlı bir şekilde çalışıyor.

— Vikram Venkatesh
kaynak

0

var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

Böylece sayfa açıldığında 1 milisaniyeden sonra otomatik olarak aşağı kaydırılır

— WapShivam
kaynak