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.

Community · Accepted Answer · 2017-05-23 12:29:39Z

3

It should be

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

As outlined in this Post

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Aug 15, 2015 at 16:15

coderrick

1,0112 gold badges8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bool3max Over a year ago

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

coderrick Over a year ago

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, <footer id="gotobottom"></footer> if(blah=blahblah){ www.webpage.com/#gotobottom}. This is just pseudo code by the way.

bool3max · Accepted Answer · 2015-08-15 17:20:16Z

I used .scrollTop and it worked.

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

Collectives™ on Stack Overflow

How to control the scrollbar in JavaScript?

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related