jQuery Прокрутіть донизу сторінки / рамки

224

Як використати jquery для прокручування праворуч донизу рамки чи сторінки?

jquery scroll scrollto

— Адам
джерело

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

— Michael Scheper

210

scrollTop () повертає кількість пікселів, які приховані від перегляду з області прокрутки, таким чином надаючи:

$(document).height()

насправді перевернеться внизу сторінки. Щоб прокрутка фактично "зупинилася" внизу сторінки, потрібно відняти поточну висоту вікна браузера. Це дозволить використати послаблення, якщо потрібно, то це стане:

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

— Том Бейтс
джерело

29

Це має бути прийнята відповідь, Том абсолютно прав, прийнята відповідь не працює добре, оскільки прокрутка різко зупиниться, а не обробить кінець ослаблення.

— Крістіан

33

Примітка: easeOutQuintпотрібен плагін, сам jQuery має linearі swing.

— newenglander

чувак, це добрі речі! Дякую. навіть робити це з 'swing' замість 'easyoutquint' показує помітні відмінності '.

— Голова Джессі

Не впевнений, що це погана форма, але я відредагував прийняту відповідь, щоб додати покажчик до цієї відповіді. Якщо це так, то хтось може його повернути.

— xaxxon

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

— VKK

35

Наприклад:

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

— Тату Ульманен
джерело

Я не можу зробити так, щоб це спрацювало. Не робить нічого взагалі.

— Адам

@adam Яку версію jQuery ви використовуєте?

— Сонні Хлопчик

14

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

Альтернатива на планеті

Оскільки у мене вже була кешована версія мого об’єкта jQuery ( myPanelу наведеному нижче коді - об’єкт jQuery), код, який я додав до свого обробника подій, був просто таким:

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

(дякую Бену)

— Грег Петтіт
джерело

1

Працював для мене з var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());

— дівом

Ви насправді повинні займатися математикою? 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.
}

— MountainRock
джерело

Це не відповідає на питання

— хуйз

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));

Тож я можу це зробити, коли додаю речі з бунчо:

$(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, які не стосуються інших людей;)

— Бруно Монтейро,

Візьміть будь-який блок із смугою прокрутки;) або весь документ.

— Олександр Лиссов