scroll to bottom of div is not working or gives an error

Question

I'm trying to have a div scroll to the bottom of the div. Inside the div is a listview. It should scroll to the bottom of the div whenever the page is loaded or when a submit button has been clicked. I've tried several ways but just can't get it to work.

These are the methods I used:

    function scrollPanelToBottom() {
       var div = document.getElementById("divChat")
       div.scrollTop($("#divChat")[0].scrollHeight - div.height());
       $("#pnlChat").scrollTop() 
     var div = document.getElementsByName(divChat);
     div.scrollTop = div.scrollHeight;
    }
    $(document).ready(function () {
        var psconsole = $('#divChat');
        psconsole.scrollTop($("#divChat")[0].scrollHeight - psconsole.height()
        );
    });

No error, but not scrolling:

    $('#divChat').scrollTop($('#divChat').height())
    $("#divChat").animate({ scrollTop: $('#divChat').height() }, 100);
    $("#divChat").animate({ scrollTop: $('#divChat')[0].scrollHeight }, 1000);
    $('#divChat').scrollTop($('#divChat')[0].scrollHeight);

    $(window).load(function () {
        $('#divChat').animate({ scrollTop: $('#divChat').height() }, 1000);
    });

    $('#divChat').scrollTop($('#divChat').prop("scrollHeight"));
    $('#divChat').scrollTop($('#divChat')[0].scrollHeight);
    $('#divChat').scrollTop($('#divChat').val("scrollHeight"));

Whenever I use the scrollHeight property it gives me an error of: Microsoft JScript runtime error: Unable to get value of the property 'scrollHeight': object is null or undefined. After searching I found that scrollTop is used to acheive this, I still can't get it to scroll... Is there any other way that I can achieve this or can somebody please tell me what I did wrong.... This is my first time working with jquery, so I'm hoping it is not something bit....

    <div id="divChat" style="overflow-x:auto; overflow-y:auto; width:100%; height:100px; min-height:100px;  max-height:100px; background-color:#d0d0d0; word-break:break-all;" runat="server">  
           <%--<asp:Panel ID="pnlChat" style="overflow-x:auto; overflow-y:auto; width:100%; height:100px; min-height:100px; max-height:100px; background-color:#d0d0d0; word-break:break-all;" runat="server" ScrollBars="Horizontal">--%>
          <div id="listDiv">
            <asp:ListView ID="lvChat" runat="server">
        <LayoutTemplate>
            <div id="itemPlaceholder" runat="server" />
        </LayoutTemplate>
        <ItemTemplate>
             <div>            
                     <asp:Label ID="lblUser" runat="server" Text='<%#Eval("Username") %>' style ="color:blue" Font-Bold="true" CssClass="ltrTitle" ></asp:Label>
                     <asp:Label ID="Label1" runat="server" Text=" Said: " CssClass="ltrTitle" Font-Bold="true" ></asp:Label>
                     <asp:Label ID="lblMessage" runat="server" Text='<%#Eval("Message") %>' CssClass="ltrTitle"></asp:Label>
             </div>
        </ItemTemplate>
             <AlternatingItemTemplate>
                            <div style="background-color:#EFEFEF">
                               <asp:Label runat="server" style ="color:green" Font-Bold="true" ID="Label1"><%#Eval("Username") %></asp:Label>
                                <asp:Label ID="Label2" runat="server" Text=" Said: " Font-Bold="true"></asp:Label>
                               <asp:Label runat="server" ID="Label6"><%#Eval("Message") %></asp:Label>
                            </div>
        </AlternatingItemTemplate>   
    </asp:ListView>
   <%-- </asp:Panel>--%>
              </div>
  </div>    

Answer 1

Check here DEMO http://jsfiddle.net/yeyene/6gAHT/

JQUERY

$(document).ready(function(){
    var divTop = $('#listDiv').height();
    // scroll chat div
    $('#divChat').stop().animate({"top": divTop }, 500, "swing");
    // screen follow chat div
    $('html, body').animate({ scrollTop: divTop }, 'slow');
});