滚动无序列表到最新项目

Question

Each time i add a item, the moment it becomes big, a scroll bar appears. But the scroll bar is not auto scrolling to the latest item which means i want the scroll bar to auto scroll to the bottom whenever i add an item.

<ul id ="list" style ="overflow:auto; height:300px;"></ul>

--------code omitted--------------

//Register sendButton Click Event
$("#sendButton").click(function () {
    hubProxy.server.send($("#inputTextBox").val());
    $("#inputTextBox").val("").focus();
    //HERE  i want it to scroll to the bottom most
});

Answer 1

You can set the scrollTop property to force the scroll position. Try this:

$("#sendButton").click(function () {
    hubProxy.server.send($("#inputTextBox").val());
    $("#inputTextBox").val("").focus();

    $('#list').scrollTop($('#list').height());
});

Note that you can also animate this effect so that it's more obvious to the user that the location of the content has changed:

$('#list').animate({ scrollTop: $('#list').height() }, "slow");