JSFiddle - React, Tailwind, and code Playground

HTML

<div id="iview-messages-pane">
<div id="iview-messages-pane-handler" class="clearfix">
    <div class="clearfix iview-messages-item" style="height:auto;min-height:60px;width:100px;margin:0;" data-cid="36" data-time="1340591805">
        <img style="margin-top: 5px;" src="http://myiview.me/upload/1/4fda8a23cb3c3_200_200.jpg" />
        <div class="iview-messages-item-info" style="width:100px;">
            <div class="iview-messages-item-info-row" style="width:inherit;">
                <a href="http://myiview.me/index.php?page=profile&uid=1">Filipe Matias</a>
                <span style="float:right;font-size:11px;">19 hours ago</span>
            </div>
            <div class="iview-messages-item-info-row">
                <span>Hmmmmmm yeeelloowww! Hmmmmmm yeeelloowww! Hmmmmmm yeeelloowww! Hmmmmmm yeeelloowww! Hmmmmmm yeeelloowww! Hmmmmmm yeeelloowww! Hmmmmmm yeeelloowww!</span>
            </div>
        </div>
    </div>
</div>
</div>

<a id="go" href="#">Go to bottom</a>

CSS

#iview-messages-pane{
height:100px;
overflow:scroll;
overflow-x:hidden;
}

JavaScript

$('#go').click(function(){
    console.log('hi');
$('#iview-messages-pane').animate({scrollTop: (function(){
            var combinedHeightOfChildren = 0;
            $('#iview-messages-pane').children().each(function(){
                combinedHeightOfChildren += $(this).outerHeight();
            });
            return combinedHeightOfChildren - $('#iview-messages-pane').height();
        })()
    }, 800);
    return false;
               });