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


200

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

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


Сценарии, упомянутые в предыдущих ответах, например: $ ("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);

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


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 миллисекунду.

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