使用ScrollTop的聊天框不适用于使用jQuery的下一个包装类

Question

嗨，我用jquery创建聊天框。当我多次单击该按钮时，滚动将返回顶部。我的目标是当我点击按钮时，它将滚动到下一个换行类。

我的HTML:

<div class="all">
<div class="wrap">
<p>
Hi, Please click data
</p>
<div class="data" data-content="0">data 1</div>
<div class="data" data-content="1">data 2</div>

JS-

var data = [

{
"content": `
<p>first content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
`
},
{
"content":`
<p>second content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
`
}
];
//$('.data').click(function(){
$(document).on('click','.data', function(){
var datacontent = $(this).attr('data-content');

$(this).parent().parent().append(`
<div class="wrap">
<p>${data[datacontent].content}</p>
<div class="data" data-content="0">data 1</div>
<div class="data" data-content="1">data 2</div>
</div>
`);

$('.all').animate({
//sepertinya disini bugsnya
scrollTop: $(this).parent().next().prop('scrollHeight')
/* scrollTop: $('.wrap').prop('scrollHeight') */
},100)
});

这是我的完整代码：https://jsfiddle.net/dedi_wibisono17/jfh4y5ot/56/

谢谢

Answer 1

也许你可以使用这样的东西，谢谢

var data = [{
"content": `
<p>first content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
`
},
{
"content": `
<p>second content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
`
}
];
$(document).on('click', '.data', function() {
var datacontent = $(this).attr('data-content');
$('.all').append(`
<div class="wrap">
<p>${data[datacontent].content}</p>
<div class="data" data-content="0">data 1</div>
<div class="data" data-content="1">data 2</div>
</div>
`).animate({
scrollTop: $(this).parent().next().prop('scrollHeight')
}, 100);
});

.data {
background:tomato;
color:white;
padding:8px;
display:inline;
cursor:pointer;
}
.all{
height: 200px;
border:1px solid;
overflow-y:auto;
padding:0 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
<div class="wrap">
<p>
Hi, Please click data
</p>
<div class="data" data-content="0">data 1</div>
<div class="data" data-content="1">data 2</div>
</div>
</div>