如何使用jquery向下滾動到底部子div

Question

我有以下 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 的位置是固定的。

Answer 1

如果要滾動它，則需要修復.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;
}

Answer 2

您可以使用以下代碼：

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

對於演示： http : //jsfiddle.net/GCu2D/776/