jQuery прокрутка до нижней части страницы / iframe

Как использовать jquery для прокрутки вниз до нижней части iframe или страницы?

8 ответов


Если вы хотите хорошую медленную анимацию прокрутки, для любого якоря с href="#bottom" это прокрутит вас вниз:

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

Не стесняйтесь менять селектор.

Edit: пожалуйста, посмотрите на ответ ниже Тома Бейтса для потенциально лучшего ответа.


scrollTop () возвращает количество пикселей, скрытых от просмотра из прокручиваемой области, поэтому дает ему:

$(document).height()

фактически будет перекрывать нижнюю часть страницы. Чтобы прокрутка фактически "остановилась" в нижней части страницы, текущая высота окна браузера требует вычитания. Это позволит использовать смягчение при необходимости, поэтому он становится:

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

например:

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

после того, как этот поток не сработал для меня для моей конкретной потребности (прокрутка внутри определенного элемента, в моем случае textarea), я обнаружил это в Великом Запределье, что может оказаться полезным для кого-то еще, читающего эту дискуссию:

альтернатива на planetcloud

поскольку у меня уже была кэшированная версия моего объекта jQuery (myPanel в приведенном ниже коде находится объект jQuery), код, который я добавил в свой обработчик событий, был просто это:

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

(спасибо Бену)


простая функция, которая прыгает (мгновенно прокручивается) в нижней части всей страницы. Он использует встроенный .scrollTop(). Я не пытался адаптировать это для работы с отдельными элементами страницы.

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

это сработало для меня:

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

если вы не заботитесь о анимации, то вам не нужно получать высоту элемента. По крайней мере, во всех браузерах, которые я пробовал, если вы даете scrollTop число, которое больше максимального, оно будет просто прокручиваться вниз. Поэтому дайте ему максимально возможное число:

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

если вы хотите прокрутить страницу, а не какой-то элемент с полосой прокрутки, просто сделать myScrollingElement равно 'body, html'.

так мне нужно сделать это в нескольких местах, я написал быстрая и грязная функция jQuery, чтобы сделать ее более удобной, например:

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

поэтому я могу сделать это, когда я добавляю материал buncho:

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

скрипты, упомянутые в предыдущих ответах, например:

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

или

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

не работает на хром и будет нервным в сафари в случае html tag in в CSS и overflow: auto; набор свойств. Мне потребовался почти час, чтобы выяснить.