I have created a chat box using jQuery. However, I am facing an issue where when I click the button multiple times, the scroll returns to the top. My objective is for the scroll to move to the next wrap class when the button is clicked.
Here is a snippet of my 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>
And here is the JavaScript portion:
var data = [
{
"content": `
<p>first content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
`
},
{
"content":`
<p>second content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
`
}
];
$(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({
scrollTop: $(this).parent().next().prop('scrollHeight')
},100)
});
If you want to see the full code, you can view it here.
Your feedback is greatly appreciated!