225

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?

1
  • 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.
    – Ilia
    Oct 23, 2016 at 11:29

11 Answers 11

474

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);
13
  • 2
    Another issue, is when it seems done, and then the user trys to scoll up, for a little bit it's locked, and makes a very jolting effect, preventing the user from scrolling up Nov 22, 2010 at 19:29
  • 1
    @AnApprentice - That's because it happens quickly (400ms by default), I'd recommend just a quick scroll to alleviate that issue. Nov 22, 2010 at 19:30
  • 3
    The lock is because the distance is off. It is animating past the visible animation. Nov 22, 2010 at 19:34
  • 32
    @NickCraver - with latest version of jQuery .scrollTop() seems not working to scroll to a particular ID; with .offset().top should work: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000); Jan 9, 2014 at 23:16
  • 3
    This answer needs to be edited. $(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.
    – silvenon
    Apr 14, 2014 at 20:28
25

something like this:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);
1
  • I tried updating the target to .write-comment and it didn't work. Maybe because that's being injected into the page? Nov 22, 2010 at 19:31
22

You can try this

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
0
17
$('html,body').animate({ scrollTop: 9999 }, 'slow');

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

2
  • 6
    This is not perfect, as in some cases, even if rare, there might be pages longer than that, specially pages that load unlimited content dynamically. This will stop the scroll mid way. Mar 18, 2019 at 15:24
  • @Gass It's been years since I wrote that, or have used any JS. Anyway, I checked and using either 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
9
$("div").scrollTop(1000);

Works for me. Scrolls to the bottom.

1
  • 25
    Not if your page is longer than 1000px.
    – Volomike
    Aug 9, 2016 at 23:22
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'

4
function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

This is the solution work from me and you find, I'm sure

1
  • It's bad practice to use the same selector twice like that as it's performing the dom selector query twice, unnecessarily hitting performance. It's better to assign the element collection to a const and reuse it like: const $container = $("#mContainer"); $container.animate({ scrollTop: $container[0].scrollHeight }, 1000); Mar 19, 2021 at 17:32
2

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

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

0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
1
  • Although this code may help to solve the problem, it doesn't explain why and/or how it answers the question. Providing this additional context would significantly improve its long-term educational value. Please edit your answer to add explanation, including what limitations and assumptions apply. Aug 29, 2016 at 13:48
0
var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

So when page open it is automatically scroll down after 1 milisecond

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.