After my page is done loading. I want jQUery to nicely scroll to the bottom of the page, animating quickly, not a snap/jolt.
Do iI need a plugin like ScrollTo
for that? or is that built into jQuery some how?
You can just animate to scroll down the page by animating the scrollTop
property, no plugin required, like this:
$(window).load(function() {
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
});
Note the use of window.onload
(when images are loaded...which occupy height) rather than document.ready
.
To be technically correct, you need to subtract the window's height, but the above works:
$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });
To scroll to a particular ID, use its .scrollTop()
, like this:
$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);
$("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);
Jan 9, 2014 at 23:16
$(document).height()
is too great of a value for scrollTop
property, you can notice that by the easing. I think $(document).height() - window.innerHeight
should be ok.
something like this:
var $target = $('html,body');
$target.animate({scrollTop: $target.height()}, 1000);
You can try this
var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
$('html,body').animate({ scrollTop: 9999 }, 'slow');
As simple as this , 9999 page height ... big range so it can reach to bottom .
Infinity
or too many 9s breaks the logic, at least in latest Chrome and FF, and instead scrolls to the top.
Aug 25, 2021 at 5:52
$("div").scrollTop(1000);
Works for me. Scrolls to the bottom.
Using 'document.body.clientHeight' you can get the seen height of the body elements
$('html, body').animate({
scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);
this scrolls at the id 'particularDivision'
function scrollToBottom() {
$("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}
This is the solution work from me and you find, I'm sure
For jQuery 3, Please change
$(window).load(function() { $("html, body").animate({ scrollTop: $(document).height() }, 1000); })
to:
$(window).on("load", function (e) { $("html, body").animate({ scrollTop: $(document).height() }, 1000); })
$('#pagedwn').bind("click", function () {
$('html, body').animate({ scrollTop:3031 },"fast");
return false;
});
This solution worked for me. It is working in Page Scroll Down fastly.
js
var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
var pixelFromTop = 500;
$('html, body').animate({ scrollTop: pixelFromTop }, 1);
So when page open it is automatically scroll down after 1 milisecond
html
tag in CSS hasoverflow: auto;
property set. It took me nearly an hour to figure out.