Auto Scroll Not Working

My auto scroll with jquery does not work, here what's in my css: #convo_mes{ text-align:left; width:98%; height:80%; background:#fff; border:1px solid #000;

Solution 1:

whats is not working in your code

$(".mes").click(function(){
    var user = $(this).attr("id");
    $("#convo").html("<b>"+user+"</b>");
    $("#convo_ctrl").show();
    $(".send_to").attr("id",user);
    $(".convo_mes").html("Loading conversation <img width='15' height='15' src='./img/load.gif'>");
    setTimeout(function(){auto_scrollmes},3000);
    setTimeout(function(){get_convo(user)},2000);
});

function auto_scrollmes(){
    var objDiv = $("#convo_mes");
    objDiv.scrollTop = objDiv.scrollHeight;
}

#convo_mes{
    text-align:left;
    width:98%;
    height:80%;
    background:#fff;
    border:1px solid #000;
    overflow-x:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="conversation">
<h2>Conversation</h2>
<hr />
<center>
<div id="convo">
Please select a message to load in here!
</div>
<div id="convo_mes">
<div class="convo_mes">

</div>
</div>
<div id="convo_ctrl">
<textarea spellcheck="false" placeholder="Enter your message here..." id='mes_text_area'></textarea><a href="#send" id="send_message">Send</a>
</div>
</div>