Добавьте <li> в конец <ul>

Это мой код:

var message;
var ul = $('.chat');
var btn = $('#btnEnviar');

btn.click(()=>{
  message = $('#Mensaje').val()
  ul.append('<li>'+message+'</li>');
})
$('#Mensaje').keyup((e)=>{
  (e.which === 13) && ul.append('<li>'+$('#Mensaje').val()+'</li>')
})

rest of the code is here:
[https://codepen.io/willmsha/pen/zyQVPb][1]

Как вы, ребята, видите, мне приходится прокручивать вниз после нескольких раз добавления нового сообщения на ul.

Есть ли шанс предотвратить это, кроме как с помощью чего-то вроде этого:

window.scrollTo(0,document.body.scrollHeight);

Итак, что я хочу сделать, это что-то вроде добавления тега li в конец ul, чтобы мне не приходилось прокручивать вниз при добавлении нового сообщения.