javascript - 滚动无序列表到最新的元素

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");