Como fazer scroll automatico

Front-end
, , ,
#1

Olá pessoal, estou desenvolvendo uma aplicação onde o usuário faz uma pergunta e o servidor entrega uma resposta, estou com o problema em fazer com que a barra de rolagem vá acompanhando a conversa, até o momento estou tendo o histórico da conversa na tela porém tenho que arrastar com o mouse para ver as novas mensagens.
Estou utilizando JSF com 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> `