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.

score 3 · Answer 1 · edited May 23 '17 at 12:29

3

It should be

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

As outlined in this Post

edited May 23 '17 at 12:29

Community

1
1

answered Aug 15 '15 at 16:15

coderrick

1,011
1
8
25

But If I do something like this : document.getElementById("messagesHolder").scrollTo(0,document.getElementById("messagesHolder").scrollHeight); The console outputs : Uncaught TypeError: document.getElementById(...).scrollTo is not a function – bool3max Aug 15 '15 at 16:20
Or you could give the bottom most element of your page and id and just set up logic to go to it on that occasion. So,
if(blah=blahblah){ www.webpage.com/#gotobottom}. This is just pseudo code by the way. – coderrick Aug 15 '15 at 16:57

score 0 · Accepted Answer · answered Aug 15 '15 at 17:20

0

I used .scrollTop and it worked.

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

answered Aug 15 '15 at 17:20

bool3max

2,748
5
28
57

How to control the scrollbar in JavaScript?

2 Answers2