jQuery Sayfanın altına git / iframe

Bir iframe veya sayfanın en altına inmek için jquery'yi nasıl kullanabilirim?

Güzel bir yavaş animasyon kaydırma istiyorsanız, bununla herhangi bir çapa için href="#bottom"sizi en alta kaydırır:

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

Seçiciyi değiştirmekten çekinmeyin.

scrollTop (), kaydırılabilir alandan görünümden gizlenen piksel sayısını döndürerek şunu verir:

$(document).height()

aslında sayfanın altını aşacaktır. Kaydırma işleminin sayfanın alt kısmında gerçekten 'durması' için tarayıcı penceresinin geçerli yüksekliğinin çıkarılması gerekir. Bu, gerektiğinde hareket hızı kullanımına izin verir, böylece olur:

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

Örneğin:

$('html, body').scrollTop($(document).height());

Bu konu benim için belirli bir ihtiyaç (benim durumumda bir textarea içinde kaydırma) benim için işe yaramadı sonra ben bunu ötesinde, bu tartışmayı okuyan bir başkası için yararlı olabilir büyük ötesinde öğrendim:

Planetcloud'da alternatif

Zaten benim jQuery nesnesinin önbelleğe alınmış bir sürümü vardı ( myPanelaşağıdaki kodda jQuery nesnesidir), benim olay işleyicisine eklediğim kod sadece bu oldu:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

(teşekkürler Ben)

Tüm sayfanın altına atlayan (anında kayan) basit bir işlev. Yerleşik kullanır .scrollTop(). Bunu tek tek sayfa öğeleriyle çalışacak şekilde uyarlamaya çalışmadım.

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

Bu benim için çalıştı:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

Animasyonu önemsemiyorsanız, öğenin yüksekliğini elde etmeniz gerekmez. En azından denediğim tüm tarayıcılarda scrollTop, maksimumdan daha büyük bir sayı verirseniz , sadece en alta kaydırılır. Bu yüzden mümkün olan en yüksek sayıyı verin:

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

Sayfayı kaydırma çubuğuna sahip bir öğe yerine kaydırmak istiyorsanız, myScrollingElement'gövde, html' değerine eşit yapın.

Bunu birkaç yerde yapmam gerektiğinden, daha rahat hale getirmek için hızlı ve kirli bir jQuery işlevi yazdım:

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

Buncho 'şeyler eklediğimde bunu yapabilirim:

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

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

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

veya

$(window).scrollTop($(document).height());

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ı.

$('.block').scrollTop($('.block')[0].scrollHeight);

Yeni mesaj geldiğinde sohbeti kaydırmak için bu kodu kullanıyorum.