Append
to the bottom of the

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.

`append` already always adds to the bottom. If you want to keep the screen at the bottom, see [this question](https://stackoverflow.com/q/37300618/215552). — Heretic Monkey, Jan 18 '19 at 00:21
Please post your code here using a StackOverflow snippet instead of referencing external code sites. — connexo, Jan 18 '19 at 00:26
@HereticMonkey thank you, that was kinda what i was looking for. connexo actually tried to but failed — Alden Willms, Jan 18 '19 at 08:43

score 1 · Accepted Answer · answered Jan 18 '19 at 00:24

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

Append to the bottom of the

1 Answers1

Append
to the bottom of the