我有以下 div 结构。
<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>
现在,当我添加 ajax 提交按钮时,新的 div <div class="msg">Hi 11</div>
添加在 <div class="conv">
的末尾。我想向下滚动到底部新添加的 div。
我使用了以下方法,但不起作用。
$('.conv ').animate({scrollTop: $('.conv')[0].scrollHeight}, 'slow');
$('.conv').scrollTop($('.conv')[0].scrollHeight);
如何向下滚动到底部子 div。父div的位置是固定的。
最佳答案
如果您想滚动,则需要修复 .conv
的高度。否则,在主体上使用滚动。
演示:http://jsfiddle.net/GCu2D/775/
JS:
$(document).ready(function () {
$('.conv ').animate({
scrollTop: $('.conv .msg:last-child').position().top
}, 'slow');
});
CSS:
.conv {
max-height:100px; //for demo
overflow:auto;
}
关于javascript - 如何使用jquery向下滚动到底部子div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31428117/