将无序列表滚动到最新项目

Question

每次我添加一个项目，当它变大时，就会出现一个滚动条。但是滚动条不会自动滚动到最新的项目，这意味着我希望滚动条在我添加项目时自动滚动到底部。

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

--------代码省略--------------

//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

您可以设置scrollTop 属性来强制滚动位置。试试这个：

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

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

请注意，您还可以对此效果进行动画处理，以便用户更清楚地看到内容的位置发生了变化：

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