Chat that scrolls down when there is a new message

I'm creating a web chat, but I have a problem: When they send messages, the chat doesn't scroll down. I think you should use JAVASCRIPT, but I'm not very experienced with it

This is the HTML code:

<div class="content-dx">
     <div id="messages"></div>
     <input type="text" id="messageBox" maxlength="100" placeholder="Type your Message here"/>
     <button id="send" onclick="Invio()"><i class="fa fa-paper-plane"></i></button>
  </div>

"message" is the box that contains the chat, the messages that arrive

CSS code (if it can be useful, but I don't think):

#messages{
background-color:yellow;
margin-bottom: 32px;
height: 86%;
overflow: auto;
text-align: left;
overflow-x: hidden;
margin-left: 5%;
width: 90%;
box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);

}

What should I do to make the scroll automatically go down when there are messages? I tried some codes, they work BUT when I want to go back to reread the messages, it won't let me go.