jQuery Scroll to bottom of page/iframe

Question

How do I use jquery to scroll right down to the bottom of an iframe or page?

score 371 · Accepted Answer · edited Jan 06 '19 at 20:29

371

If you want a nice slow animation scroll, for any anchor with href="#bottom" this will scroll you to the bottom:

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

Feel free to change the selector.

edited Jan 06 '19 at 20:29

Eb946207

748
8
26

answered Dec 11 '09 at 22:00

Mark Ursino

31,209
11
51
83

48

This works in Firefox 3.5.7 but not in Chrome 4.0.295.0. The following works in Chrome: $('html, body').animate({scrollTop: $(document).height()}, 'slow'); – Tom Jan 19 '10 at 15:13
1

@Tom, I can't spot the difference between your solution and Mark's ! – Muhammad Gelbana Aug 09 '14 at 23:07
4

@MuhammadGelbana check the edit date. It appears Mark updated his answer to include Tom's fix. – Paul Parker Oct 02 '14 at 22:19
There's actually no need to get the element's height: https://stackoverflow.com/a/44578849/1450294 – Michael Scheper Jun 16 '17 at 00:10

score 216 · Answer 2 · answered May 06 '11 at 09:20

216

scrollTop() returns the number of pixels that are hidden from view from the scrollable area, so giving it:

$(document).height()

will actually overshoot the bottom of the page. For the scroll to actually 'stop' at the bottom of the page, the current height of the browser window needs subtracting. This will allow the use of easing if required, so it becomes:

$('html, body').animate({ 
   scrollTop: $(document).height()-$(window).height()}, 
   1400, 
   "easeOutQuint"
);

answered May 06 '11 at 09:20

Tom Bates

3,212
2
20
13

30

This should be the accepted answer, Tom is absolutely right, the accepted answer doesn't work nicely as the scroll will abruptly stop instead of processing the end of the easing. – Christian Jul 05 '11 at 06:02
34

Note: `easeOutQuint` requires a plugin, jQuery itself only has `linear` and `swing`. – newenglander May 31 '12 at 08:34
dude this is good stuff! thanks. even doing this with 'swing' instead of 'easeoutquint' shows noticeable differences'. – Jesse Head Feb 14 '13 at 06:52
Not sure if it's bad form, but I edited the accepted answer to add a pointer down to this answer. If it is, then someone can revert it. – xaxxon May 08 '15 at 02:55
This solution only works if the page is interpreted in a standard's compliant mode. For example, if you don't include the ` ` on Chrome, Chrome will return the exact same value for the window and document height, in which case `$(document).height()-$(window).height()` will always return 0. See here: http://stackoverflow.com/questions/12103208/jquery-window-height-is-returning-the-document-height – VKK Jan 06 '17 at 03:27
Which browser are you using? In each browser I've tried, supplying a number larger than the height just scrolls to the bottom, so there's no need to do all that maths: https://stackoverflow.com/a/44578849/1450294 – Michael Scheper Jun 16 '17 at 00:27

score 38 · Answer 3 · edited May 06 '18 at 02:14

38

For example:

$('html, body').scrollTop($(document).height());

edited May 06 '18 at 02:14

armadadrive

963
2
11
42

answered Dec 11 '09 at 21:32

Tatu Ulmanen

123,288
34
187
185

I cannot seem to get that to work. Doesn't do anything at all. – Adam Dec 11 '09 at 21:41
@adam What version of jQuery are you using? – Sonny Boy Dec 11 '09 at 21:49

Greg Pettit · Answer 4 · 2016-02-10T17:02:56.553

15

After this thread didn't work out for me for my specific need (scrolling inside a particular element, in my case a textarea) I found this out in the great beyond, which could prove helpful to someone else reading this discussion:

Alternative on planetcloud

Since I already had a cached version of my jQuery object (the myPanel in the code below is the jQuery object), the code I added to my event handler was simply this:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

(thanks Ben)

edited Feb 10 '16 at 17:02

answered Sep 30 '11 at 15:03

Greg Pettit

10,749
5
53
72

1

Worked for me with a div: `var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());` – gregn3 Jun 16 '15 at 10:50
Do you actually have to do the maths? https://stackoverflow.com/a/44578849/1450294 – Michael Scheper Jun 16 '17 at 00:29

Rory O'Kane · Answer 5 · 2013-09-20T19:49:34.420

4

A simple function that jumps (instantly scrolls) to the bottom of the whole page. It uses the built-in .scrollTop(). I haven’t tried to adapt this to work with individual page elements.

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

edited Sep 20 '13 at 19:49

answered Sep 20 '13 at 19:33

Rory O'Kane

29,210
11
96
131

2

I don't know why, but this didn't work for me on Firefox 26.0, and would scroll to the top when this function was run. This problem was resolved by saying `$(document).scrollTop($(document).height());` – Jacklynn Jan 21 '14 at 20:03

Michael Scheper · Answer 6 · 2017-06-16T00:25:32.210

If you don't care about animation, then you don't have to get the height of the element. At least in all the browsers I've tried, if you give scrollTop a number that's bigger than the maximum, it'll just scroll to the bottom. So give it the biggest number possible:

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

If you want to scroll the page, rather than some element with a scrollbar, just make myScrollingElement equal to 'body, html'.

Since I need to do this in several places, I've written a quick and dirty jQuery function to make it more convenient, like this:

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

So I can do this when I append a buncho' stuff:

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

score 2 · Answer 7 · edited Nov 07 '12 at 18:44

2

This one worked for me:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

edited Nov 07 '12 at 18:44

Bo Persson

90,663
31
146
203

answered Nov 07 '12 at 16:42

MountainRock

594
1
9
24

This doesn't answer the question – huyz May 01 '13 at 15:15

Александр Лиссов · Answer 8 · 2020-06-15T15:03:01.400

1

$('.block').scrollTop($('.block')[0].scrollHeight);

I use this code to scroll the chat when new messages arrive.

edited Jun 15 '20 at 15:03

answered Jun 14 '20 at 20:19

Александр Лиссов

11
2

Please include some explanation for your code, especially when you copy from your own code base, using CSS classes that are not relevant for other people ;) – Bruno Monteiro Jun 14 '20 at 21:33
Take any block with a scroll bar;) or the entire document. – Александр Лиссов Jun 15 '20 at 15:01

score 0 · Answer 9 · answered Oct 23 '16 at 11:32

The scripts mentioned in previous answers, like:

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

or

$(window).scrollTop($(document).height());

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.

jQuery Scroll to bottom of page/iframe

9 Answers9

Linked

Related