Scroll to the bottom of the page automatically

Question

I’m developing an application where the user asks a question and the server delivers an answer, I’m having trouble getting the scrollbar to keep up with the conversation, So far I’m having the conversation history on the screen but I have to drag with the mouse to see the new messages. I am using JSF with AJAX .

<div id="perguntaResposta">
                <ul class="messages">
                    <h:panelGroup id="dialogo">
                        <ui:repeat var="conversa" value="#{chat.conversas}">
                            <h:panelGroup rendered="#{conversa.usuario == 1}">
                                <li class="message right appeared">
                                    <div class="avatar"></div>
                                    <div class="text_wrapper">
                                        <h:outputText value="#{conversa.intereacaoFala}" />
                                    </div>
                                </li>
                            </h:panelGroup>
                            <h:panelGroup rendered="#{conversa.usuario == 2}">
                                <li class="message left appeared">
                                    <div class="avatar"></div>
                                    <div class="text_wrapper">
                                        <h:outputText value="#{conversa.intereacaoFala}"/>
                                    </div>
                                </li>
                            </h:panelGroup>
                        </ui:repeat>
                    </h:panelGroup>
                </ul>
            </div> 

Answer 1

You can force the user to go to the end of the page with Javascript:

var heightPage = document.body.scrollHeight;
window.scrollTo(0 , heightPage);

In case I need to ask any questions: https://jsfiddle.net/lucassilvax/c9L0jn6w/1/

Answer 2

var objDiv = Document.getElementById("div_chat");

var objDiv = document.getElementById("div_chat");
objDiv.scrollTop = objDiv.scrollHeight;

objDiv.scrollTop = objDiv.scrollHeight;