I'm trying to focus on my chat messages at the top of the page, at the bottom of the page, but scrolling automatically jumps to the top. Here is my code: JS: $ (Document) .ready (function) {
$('#GridDiv').click(function(){ $('html, body').animate({scrollTop:$(document).height()}, 'slow'); return false; }) }
html:
{{ extend 'layout.html' }} <head> <title>Britam Intell Services</title> <link rel="stylesheet" type="text/css" href="{{=URL('static', 'css/index.css')}}"> <script src="index.js" language="javascript" type="text/javascript"></script> </head> <div class="well" id="GridDiv"> <div class="chatbox"> <div class="chatlogs"> <div class="chat"> {{for reply in replies:}} <div class="chat self"> <div class="user-photo"><img src="{{=URL('static','images/userOne.png')}}"/></div> <p class="chat-message"> <small>{{=prettydate(reply.created_on)}}</small> {{=XML(reply.quest.replace('\n','<br>'))}} </p> </div> </div> <div class="chat"> <div class="chat friend"> <div class="user-photo"><img src="{{=URL('static','images/userTwo.png')}}"/></div> <p class="chat-message"> {{=XML(reply.message.replace('\n','<br>'))}} </p> </div> {{pass}} </div> </div> {{=form.custom.begin}} <div class='chat-form'> <textarea name="message"></textarea> <button> Send </button> </div> {{=form.custom.end}} </div> </div>
Is there a way that I can make this function function properly to look like this using the last message below: 
source share