JSFiddle - React, Tailwind, and code Playground
HTML
<div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus.</div>
<button id="loadMore">Load More</button>
CSS
.message {
margin: 4px;
border: 1px solid green;
}
button {
display: block;
width: 100%;
height: 40px;
}
JavaScript
$(function() {
var colors = ["red", "blue", "yellow", "purple", "gray", "orange", "green"];
for (var i = 0; i < 5; i++) {
$('.message:first').clone().appendTo('body').css({
backgroundColor: colors[i % 7]
});
}
// This is the important part
$(document).on('click', '#loadMore', function() {
// Store reference to top message
var firstMsg = $('.message:first');
// Store current scroll/offset
var curOffset = $(this).offset().top - $(document).scrollTop();
// Add your new messages
firstMsg.before($('.message').eq(5).clone());
firstMsg.before($('.message').eq(5).clone());
firstMsg.before($('.message').eq(5).clone());
// Set scroll to current position minus previous offset/scroll
$(document).scrollTop($(this).offset().top-curOffset);
});
});