jQuery Прокрутите страницу вниз / страницу


224

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

Ответы:


360

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

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

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


48
Это работает в Firefox 3.5.7, но не в Chrome 4.0.295.0. В Chrome работают следующие функции: $ ('html, body'). Animate ({scrollTop: $ (document) .height ()}, 'slow');
Том

1
@ Том, я не могу определить разницу между твоим решением и решением Марка!
Мухаммед Гелбана

4
@MuhammadGelbana проверить дату редактирования. Похоже, Марк обновил свой ответ, чтобы включить исправление Тома.
Пол Паркер

На самом деле нет необходимости получать высоту элемента: stackoverflow.com/a/44578849/1450294
Майкл Шепер,

210

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

$(document).height()

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

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

29
Это должен быть принятый ответ, Том абсолютно прав, принятый ответ не работает должным образом, поскольку прокрутка резко останавливается вместо обработки окончания ослабления.
Кристиан

33
Примечание: easeOutQuintтребуется плагин, сам jQuery имеет только linearи swing.
Newenglander

чувак, это хорошая вещь! Спасибо. даже выполнение этого с «колебанием» вместо «easyoutquint» показывает заметные различия ».
Джесси Хэд

Не уверен, что это дурной тон, но я отредактировал принятый ответ, чтобы добавить указатель на этот ответ. Если это так, то кто-то может отменить это.
xaxxon

Это решение работает только в том случае, если страница интерпретируется в режиме соответствия стандарту. Например, если вы не включите <!DOCTYPE html>on в Chrome, Chrome вернет одинаковое значение для окна и высоты документа, в этом случае $(document).height()-$(window).height()всегда будет возвращаться 0. См. Здесь: stackoverflow.com/questions/12103208/…
VKK


14

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

Альтернатива на планетном облаке

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

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

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


1
Работал для меня с div:var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());
gregn3

Вы действительно должны делать математику? stackoverflow.com/a/44578849/1450294
Майкл Шепер,

4

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

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

2
Я не знаю почему, но это не сработало для меня в Firefox 26.0, и при запуске этой функции прокрутился до самого верха. Эта проблема была решена, сказав$(document).scrollTop($(document).height());
Джек

2

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

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

Это не отвечает на вопрос
huyz

2

Если вас не волнует анимация, вам не нужно получать высоту элемента. По крайней мере, во всех браузерах, которые я пробовал, если вы дадите 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();

0

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

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

или

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

не будет работать в Chrome и будет нервным в Safari, если html тег в CSS имеет overflow: auto;набор свойств. У меня ушло почти час, чтобы понять.


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

Я использую этот код для прокрутки чата, когда приходят новые сообщения.


Пожалуйста, включите некоторые пояснения для своего кода, особенно когда вы копируете из своей собственной базы кода, используя классы CSS, которые не актуальны для других людей;)
Бруно Монтейру

Возьмите любой блок с полосой прокрутки;) или весь документ.
Александр Лиссов
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.