Добавить содержимое в div и прокрутить/анимировать вниз

Я нашел способ, который работает:

$('#textdiv').animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500);

http://jsfiddle.net/5ucD3/13/

Я снова опоздал, но вот мои пять копеек.

Иногда при измерении динамических элементов использование только одного чтения может ввести в заблуждение, потому что добавляемый контент может быть длинным или потому что запрос ($.get, $.post, $.ajax и т. д.) для контента все еще находится в воздухе. . Если добавляемая строка исходит из запроса, вы должны использовать метод обратного вызова для добавления ответа.

Лучшее, что вы можете сделать, это связать это вместе, потому что javascript «должен» разрешать функции синхронно:

$("#textdiv").append('The longest string ever parsed goes here.')
.animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500);

Но вы правы, этот метод имеет тенденцию к ошибкам, особенно при работе с элементами div, которые мутируют достаточно быстро.

Вот почему, если вы хотите быть уверены, что работа выполнена, вы можете использовать Interval:

var scroll_to_bottom = function(element){
    var tries = 0, old_height = new_height = element.height();
    var intervalId = setInterval(function() {
        if( old_height != new_height ){    
            // Env loaded
            clearInterval(intervalId);
            element.animate({ scrollTop: new_height }, 'slow');
        }else if(tries >= 30){
            // Give up and scroll anyway
            clearInterval(intervalId);
            element.animate({ scrollTop: new_height }, 'slow');
        }else{
            new_height = content.height();
            tries++;
        }
    }, 100);
}

$('#textdiv').append('The longest string ever parsed goes here.');
scroll_to_bottom($('#textdiv'));

Этот метод не может сравниться с обратным вызовом или простой строкой функций, но он решает проблему, если вы точно не знаете, когда завершится добавление.

Я отредактировал и протестировал ваш код:

var div = $('#textdiv'),
    height = div.height();

$('#add').on('click', function(){
    div.append('<p>Lorem ipsum dolor sit amet, solet nostrud concludaturque no eam. Ne quod recteque pri. Porro nulla zril mei eu. Eu nibh rebum pri, eu est maiorum menandri, ridens tamquam abhorreant te eum. Ipsum definiebas ad mel.</p>');
    div.animate({scrollTop: height}, 500);
    height += div.height();
});

Попробуйте вживую в jsFiddle ​