jquery – How to scroll to the end of a div?

Question:

I'm wanting a particular div , which has the overflow-y:auto attribute, whose height is fixed, to be scrolled at the end as soon as an element is added to it.

In this case, I need it to roll to the end, because its height is fixed, but the amount of elements inside it is not fixed. That is, once an element is added with an append , I need the scroll scroll to the end of that div .

Currently, I can do this easily with the scrollTop function, but I think setting the value to 9999999 is a lot of gambiarra very dowdy.

See something close to what I have:

$(function()
{
  $('#div').animate({scrollTop: 9999999}, 500);
});
#div{
  
   height:150px;
   background: tomato;
   overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='div'>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
</div>
  • How do I scroll this div to the end without having to use the actual method described above?

  • How to know the scroll size of this div?

Answer:

Try using scrollHeight , which is a read-only property that measures the element's content:

var div = $('#div')[0];
div.scrollTop = div.scrollHeight;

Source and Fiddle .

Using only jQuery:

var div = $('#div');
div.prop("scrollTop", div.prop("scrollHeight"));

Fiddle.

Scroll to Top