Una forma podría ser la de añadir un id
al último elemento de la lista tras cargar los elementos de la página. En el siguiente ejemplo usaremos el id="ultimo"
<div class="custom-class">
<div>mensaje1</div>
<div>mensaje2</div>
<div id="ultimo">mensaje3</div>
</div>
Luego en el link que proporcionas para que las personas entren añades #ultimo
al final, de la siguiente manera: https:/link#ultimo
Para hacerlo usando javascript tendrías que modificar un poco tu html, aquí te dejo el código:
html
<div id="chat">
<div class="post">mensaje viejo</div>
<div class="post">mensaje</div>
<div class="post">ultimo mensaje</div>
</div>
javascript
// Elimina los id de los elementos del chat
var listaPost = document.getElementsByClassName("post")
for (i = 0; i < listaPost.length; i++) {
listaPost[i].removeAttribute("id")
}
// Identifica el ultimo post del chat
var ultimoPost = document.getElementById("chat").lastChild
ultimoPost.id = "ultimo"
Este código debería convertir esto:
<div id="chat">
<div class="post">mensaje viejo</div>
<div class="post" id="ultimo">mensaje</div>
<div class="post">ultimo mensaje</div>
</div>
En esto:
<div id="chat">
<div class="post">mensaje viejo</div>
<div class="post">mensaje</div>
<div class="post" id="ultimo">ultimo mensaje</div>
</div>
Otra manera de hacer esto mismo sin necesidad de usar ningún lenguaje de programación, es la de colocar un elemento que mantenga su posición al final del chat y utilizar el id de este elemento en el link, como ya expliqué antes. En código se vería de la siguiente manera:
<div id="chat-window">
<div id="posts">
<div class="post">mensaje1</div>
<div class="post">mensaje2</div>
<div class="post" id="ultimo">mensajen</div>
<!-- Los nuevos posts se añaden aqui -->
</div>
<div id="end"></div> <!-- fondo de la chat -->
</div> <!-- Aquí termina el scroll del chat -->
También puedes aplicar esta lógica a nivel de backend en tu aplicación.