jQuery Scroll to bottom of Div even after it updates?

Question

So I have a page with a chat-like div that fills up with text. It has a fixed height and width (defined by css).

I need it to scroll to bottom upon every update, here's the JS I've used so far:

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

It works for a while and then suddenly stops... I think it might have something to do with my set height for the div? I'm not sure.

So what can I do to ensure the div scrolls down to the bottom of it's content (the content is updated using a jQuery/AJAX function)

Thanks in advance!

EDIT: I've also tried $("#div1").animate({ scrollTop: $('#div1').height()}, 0); but it still stops scrolling at a certain point...

Answer 1

Have you tried with .scrollHeight:

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

scollHeight documentation at MDN