lock the scroller at the bottom of a div for chat box even after refresh

Question

Hey there i have a chat box in my site and i need to lock the scroller always at the bottom so that the new messages are always in front of the user .... i have tried like

  <div id="mainchatdiv" 
 style="overflow-y:scroll; width:100%;height:247px;background-color:#FAF4ED;">

...........messagea are here...


   </div>

<script>
    var auto_refresh = setInterval(
        function () {
            $('#mainchatdiv').load('home.php #mainchatdiv').fadeIn("slow");
        }, 5000);
    $("#mainchatdiv").scrollTop($("#mainchatdiv")[0].scrollHeight);
</script>

the code is working but whenever it refreshes the scroller again goes up....

Answer 1

<script>
var auto_refresh = setInterval(
    function () {
        $('#mainchatdiv').load('home.php #mainchatdiv').fadeIn("slow");
    }, 5000);
 var chatDiv = document.getElementById("mainchatdiv");
 chatDiv.scrollTop = chatDiv.scrollHeight;
</script>

Answer 2

How about this 1 :-

var auto_refresh = setInterval(
        function () {
            $('#mainchatdiv').load('home.php #mainchatdiv').fadeIn("slow");
            $("#mainchatdiv").scrollTop($("#mainchatdiv")[0].scrollHeight);
        }, 5000);
    $("#mainchatdiv").scrollTop($("#mainchatdiv")[0].scrollHeight);