jQuery Przewiń do dołu strony / iframe

Jak używać jquery do przewijania w dół do dolnej części ramki iframe lub strony?

Jeśli chcesz ładnego powolnego przewijania animacji, każda kotwica z href="#bottom"tym przewinie Cię do dołu:

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

Zmień selektor.

scrollTop () zwraca liczbę pikseli, które są ukryte przed widokiem z przewijanego obszaru, co daje mu:

$(document).height()

spowoduje przekroczenie dolnej części strony. Aby przewijanie faktycznie „zatrzymało się” u dołu strony, bieżąca wysokość okna przeglądarki wymaga odjęcia. Pozwoli to na użycie poluzowania, jeśli jest to wymagane, więc staje się:

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

Na przykład:

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

Po tym, jak ten wątek nie zadziałał na moją konkretną potrzebę (przewijanie w obrębie konkretnego elementu, w moim przypadku w obszarze tekstowym), znalazłem to w dalszej części, co może okazać się pomocne dla kogoś, kto czyta tę dyskusję:

Alternatywa na planetcloud

Ponieważ miałem już buforowaną wersję mojego obiektu jQuery ( myPanelw poniższym kodzie jest obiekt jQuery), kod dodany do mojej procedury obsługi zdarzeń był następujący:

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

(dzięki Ben)

Prosta funkcja, która przeskakuje (natychmiast przewija) na dół całej strony. Korzysta z wbudowanego .scrollTop(). Nie próbowałem dostosowywać tego do pracy z poszczególnymi elementami strony.

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

Ten działał dla mnie:

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

Jeśli nie zależy ci na animacji, nie musisz uzyskać wysokości elementu. Przynajmniej we wszystkich przeglądarkach, których wypróbowałem, jeśli podasz scrollTopliczbę większą niż maksymalna, po prostu przewinie się do dołu. Podaj więc jak największą liczbę:

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

Jeśli chcesz przewijać stronę, a nie jakiś element z paskiem przewijania, po prostu myScrollingElementzrównaj z „body, html”.

Ponieważ muszę to zrobić w kilku miejscach, napisałem szybką i brudną funkcję jQuery, aby była wygodniejsza, na przykład:

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

Mogę to zrobić, dodając kilka rzeczy:

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

Skrypty wymienione w poprzednich odpowiedziach, takie jak:

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

lub

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

nie będzie działać w Chrome i będzie wzburzony w Safari w przypadku, gdy html tag w CSS ma overflow: auto;ustawioną właściwość. Zrozumienie zajęło mi prawie godzinę.

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

Używam tego kodu do przewijania czatu, gdy nadchodzą nowe wiadomości.