Javascript/jQuery scroll to bottom of div issues

Site - http://www.srcf.ucam.org/~sas98/workspaces/project.php

CSS - http://www.srcf.ucam.org/~sas98/workspaces/style.css

Have a look at lines 54-58 in the source code, reproduced below.

<script type="text/javascript">
var objDiv开发者_StackOverflow = document.getElementById("chatbody");
objDiv.scrollTop = objDiv.scrollHeight;

// $("#chatbody").scrollTop($("#chatbody")[0].scrollHeight);

I'm trying to make the scroll bar go to the bottom on page load and stay there when a message is posted. I've searched on here and tried many of the options but they don't seem to be working. I'm sure it's down to something quite basic like where I'm putting the code (thought I'm sure I have the right div because it's the one that specifies overflow in the CSS).

Any ideas?

---

var objDiv = document.getElementById("chatbody"); should be run onload (window.onload / $(document).ready(); )

objDiv.scrollTop = objDiv.scrollHeight; probably needs to be run as a callback to the ajax which fetches the chat, perhaps this function function success(response, status)?

---

1. Update your jquery! You are using version 1.1.2
2. After you updated to the latest version you can use http://api.jquery.com/scrollTop/
3. Stop doing HTTP gets via ajax every 1 second that's spamming, there are better solutions like HTTP push