How to control the scrollbar in JavaScript?

Question

I have a button on my page, that, when clicked adds a new element to a div on the page. When the div reaches it max height, the scrollbar appears. Now, if I keep pressing the button, new elements will appear, and I'd have to scroll down each time I press the button, in order to see the new element.

How can I move the scrollbar to the bottom after an element is added to the div?

Thanks.

Answer 1

I used .scrollTop and it worked.

document.getElementById("messagesHolder").scrollTop = document.getElementById("messagesHolder").scrollHeight;

Answer 2

It should be

 window.scrollTo(0,document.body.scrollHeight);

As outlined in this Post