<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="myScroll"> <p> Contents will load here!!!.<br /> </p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> <p >This is test data.<br />Next line.</p> </div> </div>

#myScroll { border: 1px solid #999; } p { border: 1px solid #ccc; padding: 50px; text-align: center; } .loading { color: red; } .dynamic { background-color:#ccc; color:#000; }

var counter=0; $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) { appendData(); } }); function appendData() { var html = ''; for (i = 0; i < 10; i++) { html += '<p class="dynamic">Dynamic Data : This is test data.<br />Next line.</p>'; } $('#myScroll').append(html); counter++; if(counter==2) $('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />'); }