Scroll to bottom of Div on page load (jQuery)

Question

I have a div on my page:

<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>

How can I make the div scroll to the bottom of the div?? Not the page, just the DIV.

score 701 · Accepted Answer · edited Oct 27 '15 at 20:21

701

The other solutions here don't actually work for divs with lots of content -- it "maxes out" scrolling down to the height of the div (instead of the height of the content of the div). So they'll work, unless you have more than double the div's height in content inside of it.

Here is the correct version:

$('#div1').scrollTop($('#div1')[0].scrollHeight);

or jQuery 1.6+ version:

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

Or animated:

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);

edited Oct 27 '15 at 20:21

Logan Hasbrouck

416
1
7
21

answered Jul 18 '12 at 22:40

Mike Todd

7,227
2
15
11

8

This also works: $('#div1').scrollTop($('#div1').attr("scrollHeight")); – Mike Todd Jul 18 '12 at 22:46
2

How to make this work without setting an absolute height (in px) to `div1`? – znat Jan 11 '17 at 16:11
1

Well done! I was looking for a snippet to scroll and all I could find it page scrolling (html, body). This is a great solution and using scrollHeight is a great way to make sure it always reaches the bottom. – Kevin Marmet Jul 15 '19 at 17:04
amazing, the second one it works like so: `d = $('#div1'); $(d).scrollTop( $(d).prop("scrollHeight") );` – loretoparisi Aug 06 '19 at 14:25
1

Is there anyway to stop auto-scrolling when user holding scroll? – Akam Oct 17 '22 at 07:48
`$('#div1').scrollTop($('#div1')[0].scrollHeight);` works – Mohamed Raza Jun 13 '23 at 20:04

score 73 · Answer 2 · answered Jan 25 '14 at 17:35

73

All the answers that I can see here, including the currently "accepted" one, is actually wrong in that they set:

scrollTop = scrollHeight

Whereas the correct approach is to set:

scrollTop = scrollHeight - clientHeight

In other words:

$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);

Or animated:

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);

answered Jan 25 '14 at 17:35

patspam

2,069
18
6

I have a div with a set height and overflow set to auto. The animated answers worked but this is the only non-animated solution that would actually scroll to the bottom of the "content", not the set height of the div. Bravo! – Darkloki Apr 24 '15 at 12:07

score 27 · Answer 3 · edited May 23 '17 at 12:26

27

UPDATE : see Mike Todd's solution for a complete answer.

$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);

if you want it to be animated (over 1000 milliseconds).

$('#div1').scrollTop($('#div1').height())

if you want it instantaneous.

edited May 23 '17 at 12:26

Community

1
1

answered May 08 '12 at 17:44

Alexis Pigeon

7,423
11
39
44

12

Wrong! .height() is limited to displayed area, .prop("scrollHeight") is real height of div. – Pointer Null Jan 27 '14 at 11:05
6

Absolutely! That's why Mike Todd's [answer](http://stackoverflow.com/a/11551414/1065525) is the accepted one, not mine. – Alexis Pigeon Jan 27 '14 at 11:29

score 15 · Answer 4 · answered May 08 '12 at 17:40

15

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

This grabs the height of the page and scrolls it down once the window has loaded. Change the 1000 to whatever you need to do it faster/slower once the page is ready.

answered May 08 '12 at 17:40

Chords

6,720
2
39
61

This scrolls the whole page right? I just want the div to scroll to the bottom of the div. – DobotJr May 08 '12 at 17:41
2

touche. same logic, different selector. – Chords May 08 '12 at 17:42

score 12 · Answer 5 · answered Jan 06 '15 at 19:44

12

None of these worked for me, I have a message system inside a web app that's similar to Facebook messenger and wanted the messages to appear at the bottom of a div.

This worked a treat, basic Javascript.

window.onload=function () {
     var objDiv = document.getElementById("MyDivElement");
     objDiv.scrollTop = objDiv.scrollHeight;
}

answered Jan 06 '15 at 19:44

James Blachford

121
1
4

1

You probably don't have jQuery installed. You're working with native dom, they're using jQuery. https://jquery.com/ – csga5000 Aug 31 '15 at 17:07
Very neat and elegant solution. – Divyanshu Das Apr 15 '17 at 23:43
This is the only solution that worked for me. – Vincent Oct 14 '21 at 16:40

score 7 · Answer 6 · answered May 08 '12 at 17:41

7

try this:

$('#div1').scrollTop( $('#div1').height() )

answered May 08 '12 at 17:41

Ram

143,282
16
168
197

score 6 · Answer 7 · edited Jul 05 '13 at 03:49

6

The following will work. Please note [0] and scrollHeight

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

edited Jul 05 '13 at 03:49

Alex Gittemeier

5,224
30
55

answered Jul 05 '13 at 03:46

Lal Kokkat

61
1
1

score 5 · Answer 8 · edited Nov 26 '12 at 05:55

5

Scroll window to the bottom of target div.

function scrollToBottom(id){
  div_height = $("#"+id).height();
  div_offset = $("#"+id).offset().top;
  window_height = $(window).height();
  $('html,body').animate({
    scrollTop: div_offset-window_height+div_height
  },'slow');
}

scrollToBottom('call_div_id');

edited Nov 26 '12 at 05:55

Typist

1,464
9
14

answered Nov 26 '12 at 05:32

jenking

51
1
2

score 5 · Answer 9 · edited May 18 '15 at 16:23

5

for animate in jquery (version > 2.0)

var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);

edited May 18 '15 at 16:23

Luca

9,259
5
46
59

answered May 18 '15 at 16:05

dpineda

2,401
27
25

laaksom · Answer 10 · 2018-01-08T16:57:43.557

I'm working in a legacy codebase trying to migrate to Vue.

In my specific situation (scrollable div wrapped in a bootstrap modal), a v-if showed new content, which I wanted the page to scroll down to. In order to get this behaviour to work, I had to wait for vue to finish re-rendering, and then use jQuery to scroll to the bottom of the modal.

So...

this.$nextTick(function() {
    $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})

score 0 · Answer 11 · answered Apr 09 '19 at 17:28

0

You can check scrollHeight and clientHeight with scrollTop to scroll to bottom of div like code below.

$('#div').scroll(function (event) {
  if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) 
  {
    console.log("this is scroll bottom of div");
  }
  
});

answered Apr 09 '19 at 17:28

Nghi

1

always please test your code before providing the solutions. – Lakshmi Apr 09 '19 at 17:48

score 0 · Answer 12 · answered Apr 27 '22 at 13:45

$(document).ready(function() {
    let width = $(window).width();
    let element = $("#YourId");
    let positionFromTop = element.offset().top + element.prop("scrollHeight");
    $("html, body").animate({
        scrollTop: Math.abs($(window).height() - positionFromTop)
    }, 500);
});

score 0 · Answer 13 · edited Mar 03 '23 at 18:25

0

If you're looking to simply scroll to the bottom of a div, then just use an huge out of range integer, no css or height reference is needed.

$("#ScrollabledDiv").scrollTop(200000)

edited Mar 03 '23 at 18:25

Dylan

2,161
2
27
51

answered Feb 26 '23 at 11:24

Andyroo

11
1

score -1 · Answer 14 · answered Dec 29 '17 at 09:36

-1

You can use below code to scroll to bottom of div on page load.

$(document).ready(function(){
  $('div').scrollTop($('div').scrollHeight);
});

answered Dec 29 '17 at 09:36

Manish Nagdewani

597
1
3
14

score -1 · Answer 15 · edited Feb 18 '20 at 13:05

-1

When page is load then scroll is max value .

This is message box when user send message then always show latest chat in down so that scroll value is always is maxium.

$('#message').scrollTop($('#message')[0].scrollHeight);

see image

edited Feb 18 '20 at 13:05

TAbdiukov

1,185
3
12
25

answered Feb 18 '20 at 05:40

chandan singh

11

Scroll to bottom of Div on page load (jQuery)

15 Answers15

Linked

Related