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 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>

CSS

.conv {
    max-height:400px;
    overflow:auto;
}

.msg{
    height:100px;
    width:100px;
    border:1px solid blue;
}

JavaScript

$(document).ready(function () {
    $('.conv ').animate({
        scrollTop: $('.conv div.msg:last').offset().top
    });
});