Why do I have problems with my chat scroll?

Question

I am using jQuery and sockets to create a chat. This is the event that listens to the socket to send messages to the server that will then be shown on screens and it works.

socket.on('new message', function(data) {
        if(data === "") return false;

        $chat.append(`${data} <br />`);
        $chat.scrollBottom = $chat.scrollHeight;
        });
  });

and I have the id #chat with a css property:

  #chat {
        overflow:auto;
      }

That helps me to scroll, but the scroll bar stays on the top and does not go down with the messages. What I can do?