Как корректно сделать скролл содержимого блока?

Question

[Galdar Turin]

Очень странно работает animate({ scrollTop: $('p#end').offset().top }) когда значение доходит до

( Object { top: 887.3166809082031, left: 475.33331298828125 }

) то скролл начинает кидать по разным елементам в блоке, кто сталкивался с таким? Хотя в js указано переходить к последнему элементу с id "end"

JS

id = 22;

        var end  = $("#messages-"+id+" .from-me, #messages-"+id+" .from-them").last(),
            read = $(end).hasClass('read');
        console.log($(end).attr('id'));
        if( $(end).attr('id') == '' && read == false)
        {
            $(end).attr('id', 'end');
            animateCSS('#end', 'fadeIn', '');
            
            //console.log($("#chatManager").animate({ scrollTop: $('p#end').offset().top }, 1000));
            console.log($('p#end').offset());
            $("#chatManager").animate({ scrollTop: $('p#end').offset().top });

            $(end).attr('id', '');
            end.addClass('read');
        }

HTML

<div id="chatManager">
<div id="messages-22" class="mess">
<p class="from-them item">TEXT</p>
<p class="from-them item">TEXT</p>
<p class="from-them item">TEXT</p>
<p class="from-them item">TEXT</p>
<p class="from-them item">TEXT</p>
<p class="from-them item">TEXT</p>
<p class="from-them item">TEXT</p>
<p class="from-them item">TEXT</p>
<p class="from-them item">TEXT</p>
<p class="from-them item">TEXT</p>
<p class="from-them item">TEXT</p>
</div>
</div>