jQuery прокрутить вниз страницы

138

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

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

Теги:
jquery-plugins

9 ответов

302
Лучший ответ

Вы можете просто анимировать прокрутку страницы, анимируя свойство 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);
  • 0
    Вы можете контролировать скорость? И #ID это идет?
  • 0
    @AnApprentice - если вы хотите прокрутить до определенного идентификатора, он будет выглядеть как $("html, body").animate({scrollTop: $("#myID").scrollTop() }, 1000); для этого потребуется одна секунда.
Показать ещё 12 комментариев
13

что-то вроде этого:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);
  • 0
    Я попытался обновить цель до .write-comment, и это не сработало. Может потому, что это вводится на страницу?
  • 0
    <code> .write-comment </ code> является контейнером переполнения?
8
$('html,body').animate({ scrollTop: 9999 }, 'slow');

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

  • 0
    Спасибо, это идеальный ответ !!!
  • 0
    Это не идеально, так как в некоторых случаях, даже если редко, могут быть страницы длиннее, особенно страницы, которые динамически загружают неограниченное содержимое. Это остановит прокрутку в середине пути.
4
$("div").scrollTop(1000);

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

  • 8
    Нет, если ваша страница длиннее 1000 пикселей.
2

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

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

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

0

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

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
  • 2
    Спасибо, самое надежное и современное решение.
0
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Это решение сработало для меня. Он работает в режиме прокрутки страницы вниз.

0

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

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

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

0

JS

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
  • 0
    Хотя этот код может помочь решить проблему, он не объясняет, почему и / или как он отвечает на вопрос. Предоставление этого дополнительного контекста значительно улучшило бы его долгосрочную образовательную ценность. Пожалуйста, измените свой ответ, чтобы добавить объяснение, в том числе какие ограничения и предположения применяются.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню