После того, как моя страница загрузится. Я хочу, чтобы jQUery красиво прокручивался до конца страницы, быстро анимировался, а не щелкал мышью.
Нужен ли мне ScrollTo
для этого такой плагин ? или это каким-то образом встроено в jQuery?
После того, как моя страница загрузится. Я хочу, чтобы jQUery красиво прокручивался до конца страницы, быстро анимировался, а не щелкал мышью.
Нужен ли мне ScrollTo
для этого такой плагин ? или это каким-то образом встроено в jQuery?
Ответы:
Вы можете просто анимировать прокрутку страницы вниз, анимируя 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);
$("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);
$(document).height()
слишком велико для scrollTop
свойства, вы можете заметить это по ослаблению. Думаю, $(document).height() - window.innerHeight
должно быть хорошо.
что-то вроде этого:
var $target = $('html,body');
$target.animate({scrollTop: $target.height()}, 1000);
$('html,body').animate({ scrollTop: 9999 }, 'slow');
Все очень просто, высота страницы 9999 ... большой диапазон, чтобы он мог доходить до самого низа.
Используя 'document.body.clientHeight', вы можете получить видимую высоту элементов тела
$('html, body').animate({
scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);
это прокручивается по идентификатору 'specificDivision'
$('#pagedwn').bind("click", function () {
$('html, body').animate({ scrollTop:3031 },"fast");
return false;
});
Это решение сработало для меня. Быстро работает в Page Scroll Down.
function scrollToBottom() {
$("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}
Это решение работает от меня, и вы найдете, я уверен
Для jQuery 3 измените
$ (window) .load (function () {$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000);})
кому:
$ (window) .on ("load", function (e) {$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000);})
js
var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
html
тег в CSS имеетoverflow: auto;
набор свойств. На это у меня ушло почти час.