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

200

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

Нужен ли мне ScrollToдля этого такой плагин ? или это каким-то образом встроено в jQuery?

AnApprentice
источник
Сценарии, упомянутые в предыдущих ответах, например: $ ("body, html"). Animate ({scrollTop: $ (document) .height ()}, 400) не будут работать в Chrome и будут нестабильными в Safari, если html тег в CSS имеет overflow: auto;набор свойств. На это у меня ушло почти час.
Илья Ростовцев

Ответы:

427

Вы можете просто анимировать прокрутку страницы вниз, анимируя 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
Другая проблема - это когда кажется, что это сделано, а затем пользователь пытается свернуть, на некоторое время он заблокирован и производит очень резкий эффект, не позволяя пользователю
прокрутить
1
@AnApprentice - потому что это происходит быстро (по умолчанию 400 мс), я бы рекомендовал просто быструю прокрутку решить эту проблему.
Ник Крейвер
3
Блокировка из-за того, что дистанция отключена. Это анимация за пределами видимой анимации.
Джозайя Рудделл,
28
@NickCraver - в последней версии jQuery .scrollTop () не работает для прокрутки до определенного идентификатора; с .offset (). top должен работать: $("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);
Джозайя Радделл
источник
Я попытался обновить цель до .write-comment, и это не сработало. Может быть, потому что это вводится на страницу?
AnApprentice,
16
$('html,body').animate({ scrollTop: 9999 }, 'slow');

Все очень просто, высота страницы 9999 ... большой диапазон, чтобы он мог доходить до самого низа.

Алин Разван
источник
4
Это не идеально, так как в некоторых случаях, даже если это редко, могут быть страницы длиннее, чем это, особенно страницы, которые загружают неограниченное количество контента динамически. Это остановит прокрутку на полпути.
Ахил Гупта
16

Вы можете попробовать это

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
Сарат Ак
источник
9
$("div").scrollTop(1000);

Работает для меня. Прокрутка вниз.

f123
источник
18
Нет, если ваша страница длиннее 1000 пикселей.
Volomike
3

Используя 'document.body.clientHeight', вы можете получить видимую высоту элементов тела

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

это прокручивается по идентификатору 'specificDivision'

Анбу
источник
2
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Это решение сработало для меня. Быстро работает в Page Scroll Down.

Викрам Венкатеш
источник
2
function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

Это решение работает от меня, и вы найдете, я уверен

Рошан Мадусанка
источник
1

Для jQuery 3 измените

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

кому:

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

Аднан Тахир
источник
0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
кодекс
источник
Хотя этот код может помочь решить проблему, он не объясняет почему и / или как он отвечает на вопрос. Предоставление этого дополнительного контекста значительно улучшило бы его долгосрочную образовательную ценность. Пожалуйста , измените свой ответ , чтобы добавить объяснение, в том числе то , что применять ограничения и допущения.
Тоби Спейт
0
var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

Итак, когда страница открыта, она автоматически прокручивается вниз через 1 миллисекунду.

WapShivam
источник