附加 <li> 到底部 <ul>

Question

This is my code:

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]

As you guys can see that I have to scroll down after few times of adding new message to the ul.

Is there any chance to prevent that except using something like this:

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

So what I wanna do is something like to append the li tag to the bottom of the ul, so I wont have to scroll down when a new mesage is added.

Answer 1

Just use the .scrollIntoView() method. Add this to your btn.click listener:

var children = document.getElementsByClassName("chat")[0].childNodes;

children[children.length-1].scrollIntoView();

Read more about it here: https://www.w3schools.com/jsref/met_element_scrollintoview.asp