asp.net mvc, неупорядоченный список прокручивается вниз при обратной передаче

Question

Каждый раз, когда li добавляется в ul, свиток остается на том же месте, как перемещать прокрутку всегда в конец ul при обратной передаче, чтобы показать последние элементы?

  <ul id="discussion"></ul>



 <script>
    var usrName = "@HttpContext.Current.User.Identity.Name";
    $(function () {
        var chat = $.connection.chatHub;
        chat.client.addNewMessageToPage = function (name, message) {
            $('#discussion').append('<li style="left:5%"><strong>' + htmlEncode(name)
                + '</strong>: ' + htmlEncode(message) + '</li>');
        };
        $('#displayname').val(usrName);
        $('#message').focus();
        $.connection.hub.start().done(function () {
            $('#sendmessage').click(function () {
                chat.server.send($('#displayname').val(), $('#message').val());
                $('#message').val('').focus();
            });
        });
    });
    function htmlEncode(value) {
        var encodedValue = $('<div />').text(value).html();
        return encodedValue;
    }
</script>

Решение Эндрю Уолтерса

            //  function that the hub call back to display messages.
             chat.client.addNewMessageToPage = function (name, message) {
            // Adds message
            $('#discussion').append('<li style="left:5%"><strong>' + htmlEncode(name)
                + '</strong>: ' + htmlEncode(message) + '</li>');
            //scrolls down after item is added
            $("#discussion").scrollTop($("#discussion")[0].scrollHeight);

Answer 1

Вы захотите повторно прокрутить после добавления каждого элемента.

$("#discussion").scrollTop($("#discussion")[0].scrollHeight);

Пример: http://jsfiddle.net/4etXb/2/