jQuery Scroll To bottom of the page

Question

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?

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 Ross, Oct 23 '16 at 11:29

score 477 · Accepted Answer · edited Feb 13 '12 at 13:47

477

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

edited Feb 13 '12 at 13:47

Matt Fenwick

48,199
22
128
192

answered Nov 22 '10 at 19:25

Nick Craver

623,446
136
1,297
1,155

Can you controll the speed? And the #ID it goes to? – AnApprentice Nov 22 '10 at 19:26
@AnApprentice - If you want to scroll to a particular ID it would look like `$("html, body").animate({scrollTop: $("#myID").scrollTop() }, 1000);` for it take one second. – Nick Craver Nov 22 '10 at 19:28
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 – AnApprentice Nov 22 '10 at 19:29
If I get rid of the 1000 it doesn't do that. – AnApprentice Nov 22 '10 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. – Nick Craver Nov 22 '10 at 19:30
is there a way to put a stop() it the func so when it's done it doesn't get locked? – AnApprentice Nov 22 '10 at 19:32
@AnApprentice - when it's done it'll unlock already, you can't just add a stop because this triggers the event that matters..`scroll`, you could bind to mouse wheel, but clicks on the scrollbar wouldn't register. – Nick Craver Nov 22 '10 at 19:34
3

The lock is because the distance is off. It is animating past the visible animation. – Josiah Ruddell Nov 22 '10 at 19:34
for scrollable elements, the attribute `scrollHeight` is helpful. – yuwang Jan 28 '13 at 09:00
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);` – Paolo Gibellini Jan 09 '14 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 '14 at 20:28
note that in jQuery 3.0, you have to use `$(window).on("load", function() {` instead of `$(window).load(function() {` – He Yifei 何一非 Jul 03 '16 at 11:40
What do you mean "technically correct". Do you mean "correct", because that's what the second code block is. The top code block does not give the desired behavior. – Goose Jul 12 '17 at 21:05

score 26 · Answer 2 · answered Nov 22 '10 at 19:28

26

something like this:

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

answered Nov 22 '10 at 19:28

Josiah Ruddell

29,697
8
65
67

I tried updating the target to .write-comment and it didn't work. Maybe because that's being injected into the page? – AnApprentice Nov 22 '10 at 19:31

score 22 · Answer 3 · answered Sep 15 '17 at 06:30

22

You can try this

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

answered Sep 15 '17 at 06:30

Sarath Ak

7,903
2
47
48

score 17 · Answer 4 · answered Dec 03 '15 at 10:48

17

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

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

answered Dec 03 '15 at 10:48

Alin Razvan

1,451
13
18

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. – Akhil Gupta Mar 18 '19 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. – Akhil Gupta Aug 25 '21 at 05:52

score 9 · Answer 5 · answered Jul 10 '15 at 13:35

9

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

Works for me. Scrolls to the bottom.

answered Jul 10 '15 at 13:35

f123

382
2
9

25

Not if your page is longer than 1000px. – Volomike Aug 09 '16 at 23:22

score 5 · Answer 6 · answered Dec 23 '15 at 07:46

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'

score 4 · Answer 7 · answered Apr 18 '20 at 20:34

4

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

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

answered Apr 18 '20 at 20:34

Roshan Madusanka

41
2

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); – Antony Booth Mar 19 '21 at 17:32

score 2 · Answer 8 · answered Jul 12 '18 at 17:53

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

answered Jul 12 '18 at 17:53

Adnan Tahir

69
5

score 1 · Answer 9 · edited Jul 13 '17 at 12:16

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.

edited Jul 13 '17 at 12:16

roottraveller

7,942
7
60
65

answered Jul 13 '17 at 10:23

vikram venkatesh

19
1

score 0 · Answer 10 · edited Aug 29 '16 at 10:35

0

js

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

edited Aug 29 '16 at 10:35

Damian Bartosik

498
6
24

answered Aug 29 '16 at 08:40

codeskyblue

408
4
6

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. – Toby Speight Aug 29 '16 at 13:48

score 0 · Answer 11 · answered Jan 06 '20 at 11:27

0

var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

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

answered Jan 06 '20 at 11:27

WapShivam

964
12
20

jQuery Scroll To bottom of the page

11 Answers11

Linked

Related