点击$('#openDiv')时div滚动到底部代码失效的问题咨询

我一眼就看出问题出在哪了——你是在元素刚被设置为显示的同一时间就执行滚动操作，但浏览器还没完成这个元素的渲染工作，导致scrollHeight的计算结果不对，滚动自然就没效果了。

解决方案：等元素完全显示后再执行滚动 #

把滚动动画代码放到show()方法的回调函数里，这样就能确保元素已经被浏览器渲染完成，scrollHeight的值是准确的。

修改后的JavaScript代码如下：

$(document).ready(function() {
 $('#openDiv').on('click', function(){
 $('#openDiv').hide();
 $('#closeDiv').show();
 // 把滚动代码放到show的回调里，确保元素完全显示后执行
 $("#mainDiv").show(function() {
   $(this).animate({ scrollTop: $(this).prop("scrollHeight") }, 1000);
 });
 });
 $('#closeDiv').on('click', function(){
 $('#closeDiv').hide();
 $("#mainDiv").hide();
 $('#openDiv').show();
 });
});

为什么原来的代码不行？ #

当元素处于display:none状态时，它的scrollHeight是无效的（通常为0）。你在调用show()后立刻执行滚动，此时浏览器还没来得及重新计算元素的布局和滚动高度，所以scrollTop设置的是一个无效值，动画自然不会生效。

额外的替代方案 #

如果你不想用回调，也可以用setTimeout来延迟滚动操作（不过回调方案更可靠）：

$("#mainDiv").show();
setTimeout(function() {
  $("#mainDiv").animate({ scrollTop: $('#mainDiv').prop("scrollHeight") }, 1000);
}, 10);

完整可运行代码 #

这里是修改后的完整代码，我还修复了你HTML里重复使用ID的问题（同一个页面ID必须唯一）：

<button id="openDiv">Open div</button>
<button id="closeDiv">Close div</button>
<div id="mainDiv">
 <div class="divText">
 <h5>text</h5>
 </div>
 <div class="divText">
 <h5>text</h5>
 </div>
 <div class="divText">
 <h5>text</h5>
 </div>
 <div class="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>
<style>
#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;
}
</style>
<script>
$(document).ready(function() {
 $('#openDiv').on('click', function(){
 $('#openDiv').hide();
 $('#closeDiv').show();
 $("#mainDiv").show(function() {
   $(this).animate({ scrollTop: $(this).prop("scrollHeight") }, 1000);
 });
 });
 $('#closeDiv').on('click', function(){
 $('#closeDiv').hide();
 $("#mainDiv").hide();
 $('#openDiv').show();
 });
});
</script>

现在点击"Open div"按钮，mainDiv会平滑滚动到底部，和你想要的Stack Overflow聊天室效果完全一致。

内容的提问来源于stack exchange，提问作者mario