Can anyone help with why my scroll code isn't working? I'm trying to make the scroll go to the bottom when I click on $('#openDiv').
For example, when you enter a chat room on stackoverflow, the scroll is automatically at the bottom, and that's what I want.
I've also attempted putting the scroll code outside of the click function, but it's still not functioning...
$(document).ready(function() {
$('#openDiv').on('click', function(){
$('#openDiv').hide();
$('#closeDiv').show();
///////// NOT WORKING /////////
$("#mainDiv").animate({
scrollTop: $('#mainDiv').prop("scrollHeight")
}, 1000);
///////// NOT WORKING /////////
$("#mainDiv").show();
});
$('#closeDiv').on('click', function(){
$('#closeDiv').hide();
$("#mainDiv").hide();
$('#openDiv').show();
});
});#mainDiv {
height: 150px;
background-color: #2A2A2A;
overflow-y: auto;
overflow-x: hidden;
display: none;
}
#divText {
color: #fff;
background-color: #555555;
height: 20px;
}
#divTextEnd{
color: #fff;
background-color: red;
height: 20px;
}
#openDiv{
background-color: green;
border: none;
color: #fff;
}
#closeDiv{
display: none;
background-color: red;
border: none;
color: #fff;
}<button id="openDiv">Open div</button>
<button id="closeDiv">Close div</button>
<div id="mainDiv">
<div id="divText">
<h5>text</h5>
</div>
<div id="divText">
<h5>text</h5>
</div>
<div id="divText">
<h5>text</h5>
</div>
<div id="divText">
<h5>text</h5>
</div>
<div id="divTextEnd">
<h5>text</h5>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>