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"
);
после того, как этот поток не сработал для меня для моей конкретной потребности (прокрутка внутри определенного элемента, в моем случае textarea), я обнаружил это в Великом Запределье, что может оказаться полезным для кого-то еще, читающего эту дискуссию:
поскольку у меня уже была кэшированная версия моего объекта 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;
набор свойств. Мне потребовался почти час, чтобы выяснить.