jQuery objects have no property scrollHeight, change that to a function call of height.

$('#messages').scrollTop = $('#messages').height();

Try this

socket.on('message', (content) => {
    $('#messages').append(`<li>${content.bold} ${content.std}</li>`);
    $("#messages").animate({ scrollTop: $("#messages")[0].scrollHeight}, 1000);
    console.log('scroll')
});

I have tried to create simulation of chat box.

During the overflow, height of element does not change, that’s why @expressjs123’s answer did not work, you’ll need to use height of the content inside the chat box, which is scollHeight of the element.

The Element.scrollHeight read-only property is a measurement of the
height of an element’s content, including content not visible on the
screen due to overflow.

Source: Element.scrollHeight

scrollHeight is the propery of the element therefor i have used vanilla javascript code to get scollheight.

var element = document.getElementById("messages");
element.scrollHeight;

Note: I have given you the basic overview that how can achieve the vertical scroll 100%, the code may vary with your code/project, you may need to put some effort, but this is the basic idea for what you are looking for.

setInterval(function() {
  var element = document.getElementById("messages");
  $("#messages").append("<p class='m" +parseInt((Math.random()) * 5)+ "'>Message #" + new Date().getTime() + "</p>");
  $("#messages").scrollTop(element.scrollHeight);
}, 500);

#messages {
  height: 300px;
  width: 200px;
  overflow: auto;
  border: 1px solid #ddd;
  background: #f1f1f1;
  padding: 5px;
  font-family:monospace;
}

p {
  border: 1px solid #ddd;
  background: #fff;
  padding:4px;
  font-size: 11px;
  width: auto;
  float: left;
  clear: both;
  margin: 2px 0;
  border-radius:3px;
}

p.m4,p.m3,p.m0{
  background: #f1f8ff;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages"></div>

In your git I’m seeing that you’re using scroll method on #messageContainer not #messages, make sure to select correct element, else the code won’t work.

scrolltop is a function, so you have to call it with (height) (jquery docs: https://api.jquery.com/scrolltop/#scrollTop2). (almost) every jquery thing is called with a function

I am making a message app with express and socket.io. The messages are appended to a list as shown below:

<div id="messageContainer">
    <ul id="messages"></ul>
</div>

socket.on('message', (content) => {
    $('#messages').append(`<li>${content.bold} ${content.std}</li>`);
    $('#messages').scrollTop = $('#messages').scrollHeight;
});

The messages are appended correctly appended however the scrolling does not occur. I get no error message and I am unsure why.

The full source code can be found on GitHub here.

Edit

I have added a console.log('scroll') to the bottom of the js call however nothing is shown.

socket.on('message', (content) => {
    $('#messages').append(`<li>${content.bold} ${content.std}</li>`);
    $('#messages').scrollTop = $('#messages').height();
    console.log('scroll')
});

This makes me think that scrolling isn’t being called even thought the messages are being appended