While developing a chat application, we may come across a situation when we require a div to automatically scroll down as the new message gets updated.

If we have set the overflow property of the div to auto, the scroll bar appears however, we have to manually scroll it down to see the new line of messages.

You just need to include the javascript code below to scroll down the div automatically:

You just need to replace chatWindowId in the code above with the actual id of your chat window div. The element has to be scrollable (overflow:auto; or overflow-y: auto;). Also check the online documentation for scrollTop to learn more.