JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<div id="conversation" class="list-view">
    <div class="conv">
        <div class="msg">Hi 1</div>
        <div class="msg">Hi 2</div>
        <div class="msg">Hi 3</div>
        <div class="msg">Hi 4</div>
        <div class="msg">Hi 5</div>
        <div class="msg">Hi 6</div>
        <div class="msg">Hi 7</div>
        <div class="msg">Hi 8</div>
        <div class="msg">Hi 9</div>
        <div class="msg">Hi 10</div>
    </div>
</div>

CSS

.conv {
    max-height:100px;
    overflow:auto;
}
.msg {
    padding:50px;
    border:1px solid red;
}

JavaScript

$(document).ready(function () {
    $('.conv ').animate({
        scrollTop: $('.conv .msg:last-child').position().top
    }, 'slow');
});