Here is the script you can use on page load, or wheneverr user submits message or on new user chat click. You will need to include jQuery before this code to functions as expected.
The jQuery stop() method is used to stop animations or effects before it is finished. So whenever user clicks another chat even if aimation is not finished or when user submits messages one after another quickly. Then only the last call to function will work and initial animation will stop. This improves user experience drastically and make everything smooth.
const scrollToBottom = function(){
$(".chat-container").stop().animate({ scrollTop: $(".chat-container")[0].scrollHeight}, 1000);
}See the Pen Untitled by Puneet Sharma (@webdevpuneet) on CodePen.