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?
This question is related to
jquery
jquery-plugins
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);
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'
$("div").scrollTop(1000);
Works for me. Scrolls to the bottom.
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")});
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
$('#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.
$('html,body').animate({ scrollTop: 9999 }, 'slow');
As simple as this , 9999 page height ... big range so it can reach to bottom .
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); })
Source: Stackoverflow.com