如何使用jquery向下滚动到底部子div答案

【问题标题】：How to scroll down to bottom child div using jquery如何使用jquery向下滚动到底部子div
【发布时间】：2020-10-18 20:42:06
【问题描述】：

我有以下 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 div添加css
Scroll to bottom of div? 的可能重复项
@Jazz，我的意思是将您当前的 css 用于 conv div 添加到问题中。我想看看你是否在上面设置了高度
是的，我已经添加了.conv{ max-height:401px; overflow:auto; }。

标签： javascript jquery html

【解决方案1】：

如果你想滚动它，你需要修复.conv 的高度。否则，在 body 上使用滚动。

演示：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;
}

【讨论】：

嗨，它滚动到最后一个元素，但在再次滚动后焦点到顶部 div。并且可以不 div max-height?
您需要有一个高度才能滚动该 div。没有高度，滚动条将不会出现，因此不会发生滚动。因此，您必须在该 div 上设置一些高度。您可以通过在 animate 的回调函数中再次跟随相同的登录来滚动回到 div 的顶部。
是的。但它首先滚动到底部，然后再次滚动到第一个。我只想向下滚动到底部。
然后代替选择器中的 :last-child ，添加新添加元素的索引。演示：jsfiddle.net/GCu2D/778

【解决方案2】：

您可以使用以下代码：

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

对于演示：http://jsfiddle.net/GCu2D/776/

【讨论】：

我会使用position 而不是offset
您可以使用它，因为 .position() 方法允许我们检索元素相对于偏移父元素的当前位置，而 offset() 方法检索相对于文档的当前位置。
@sahilgupta，它是 OP 要滚动的偏移父级 - 而不是文档