jQuery Scroll To bottom of the page

AnApprentice Source

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?

jqueryjquery-plugins

Answers

answered 8 years ago Nick Craver #1

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);

answered 8 years ago Josiah Ruddell #2

something like this:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);

answered 3 years ago f123 #3

$("div").scrollTop(1000);

Works for me. Scrolls to the bottom.

answered 3 years ago Alin Razvan #4

$('html,body').animate({ scrollTop: 9999 }, 'slow');

As simple as this , 9999 page height ... big range so it can reach to bottom .

answered 3 years ago Anbu #5

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'

answered 2 years ago codeskyblue #6

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;

answered 2 years ago Ilia Rostovtsev #7

The scripts mentioned in previous answers, like:

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

will not work in Chrome and will be jumpy in Safari in case html tag in CSS has overflow: auto; property set. It took me nearly an hour to figure out.

answered 1 year ago vikram venkatesh #8

$('#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.

answered 1 year ago Sarath Ak #9

You can try this

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});

answered 2 months ago Adnan Tahir #10

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); })

comments powered by Disqus