How can i make a div scroll to its end, Y-Axis

Question

i have a div with chat, that is already scroll-able. But i want it to scroll to last chat automatically. Here is what chat box looks like when load.

But i want it like image below, when it loads.

How can i achieve this? Kind help is appreciated, Thank you!

Answer 1

If you try to understand height and scrollheight values, the formula will be:

Element.scrollTop = Element.scrollHeight - Element.offsetHeight;

Note: Element variable stands for scroll container element.

Answer 2

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