it-swarm.com.ru

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

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

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

168
AnApprentice

Вы можете просто анимировать прокрутку вниз страницы, анимируя свойство 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);
363
Nick Craver

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

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);
17
Josiah Ruddell
$('html,body').animate({ scrollTop: 9999 }, 'slow');

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

13
Alin Razvan

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

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
8
Sarath Ak
$("div").scrollTop(1000);

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

8
f123

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

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

это свитки с идентификатором «specificDivision»

3
Anbu

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

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

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

1
Ilia Rostovtsev

Для jQuery 3, пожалуйста, измените 

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

чтобы:

$ (window) .on ("загрузка", функция (e) { $ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000); } )

1
Adnan Tahir

jS

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
0
codeskyblue
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

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

0
vikram venkatesh