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

198

Після завантаження моєї сторінки Я хочу, щоб jQUery чудово прокручував донизу сторінки, анімацію швидко, а не оснащення / поштовх.

Мені потрібен такий плагін ScrollToдля цього? чи це вбудований у jQuery якийсь?

jquery jquery-plugins

— Учень
джерело

418

Ви можете просто анімувати, щоб прокрутити сторінку вниз, анімувавши scrollTopвластивість, плагін не потрібен, як це:

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Зверніть увагу на використання window.onload(коли завантажуються зображення ..., які займають висоту), а не document.ready.

Щоб бути технічно правильним, потрібно відняти висоту вікна, але вищезазначене працює:

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

Для прокрутки до певного ідентифікатора використовуйте його .scrollTop(), наприклад:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);

— Нік Крейвер
джерело

2

Інша проблема - коли здається, що це зроблено, і тоді користувач намагається розшифруватися, на деякий час він заблокований і робить дуже ефектний ефект, не даючи користувачеві прокручуватися вгору

— AnApprentice

1

@AnApprentice - Це тому, що це відбувається швидко (400 м. За замовчуванням), я рекомендую лише швидку прокрутку, щоб полегшити цю проблему.

— Нік Крейвер

3

Блокування відбувається через те, що відстань вимкнено. Це анімація минулого видимої анімації.

— Джосія Рудделл

28

@NickCraver - з останньою версією jQuery .scrollTop (), здається, не працює для прокрутки до певного ідентифікатора; з .offset (). Вгорі має працювати: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);

— Паоло Джібелліні

3

Цю відповідь потрібно відредагувати. $(document).height()Занадто велика цінність для scrollTopвласності, ви можете помітити це шляхом ослаблення. Я думаю, $(document).height() - window.innerHeightмає бути гаразд.

— silvenon

23

щось на зразок цього:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);

— Джосія Рудделл
джерело

Я спробував оновити ціль, щоб написати. Коментар, і це не спрацювало. Може тому, що це вводиться в сторінку?

— AnApprentice

16

$('html,body').animate({ scrollTop: 9999 }, 'slow');

Настільки ж просто, 9999 висота сторінки ... великий діапазон, щоб вона могла досягати донизу.

— Алін Разван
джерело

1

Це не ідеально, оскільки в деяких випадках, навіть якщо вони рідкісні, можуть бути сторінки довші за них, спеціально сторінки, які динамічно завантажують необмежений вміст. Це зупинить прокрутку в середині шляху.

— Ахіл Гупта

13

Ви можете спробувати це

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});

— Сарат Ак
джерело

10

$("div").scrollTop(1000);

Працює для мене. Прокручується донизу.

— f123
джерело

13

Не, якщо ваша сторінка довше 1000 пікселів.

— Воломіке

4

Сценарії, згадані в попередніх відповідях, такі:

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

не працюватиме в Chrome і буде скакати в Safari у випадку, якщо html тег у CSS встановлений overflow: auto;властивістю. На це мені знадобилося майже годину.

— Ілля Ростовцев
джерело

3

Використовуючи "document.body.clientHeight", ви можете бачити висоту елементів кузова

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

це прокрутка на id 'зокремаDivision'

— Анбу
джерело

1

Для jQuery 3, будь ласка, змініть

$ (window) .load (function () {$ ("html, body"). animate ({scrollTop: $ (документ). висота ()}, 1000);})

до:

$ (window) .on ("завантаження", функція (e) {$ ("html, body"). animate ({scrollTop: $ (document). висота ()}, 1000);})

— Аднан Тахір
джерело

1

function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

Це вирішення роботи у мене, і ви знайдете, я впевнений

— Рошан Мадусанка
джерело

0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;

— codekyblue
джерело

Хоча цей код може допомогти вирішити проблему, він не пояснює, чому та / або як він відповідає на питання. Забезпечення цього додаткового контексту суттєво покращило б його довгострокове навчальне значення. Будь ласка , змініть свій відповідь , щоб додати пояснення, в тому числі те , що застосовувати обмеження і допущення.

— Toby Speight

0

$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Це рішення спрацювало на мене. Він працює в "Прокрутка сторінки" швидко.

— vikram venkatesh
джерело

0

var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

Тож при відкритті сторінки вона автоматично прокручується вниз через 1 мілісекунд

— WapShivam
джерело