JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result">
</div>

JavaScript

var selectedParagraph = "";

  $(document).ready(function(){
     
    $(window).on('scroll', function () {
        console.log("User manual scrolled.");
    });
      
    $(document).on("click", ".para", function(){
      var divHeight = $(this).offset().top;
      $(window).scrollTop(divHeight);
      selectedParagraph = $(this).attr("id");
    });
    
    $(document).on("click", "#btnAddContent", function(){
      AddContent();
    });
        
    init();         
  });
  
  
  
  function AddContent(){
    $(".UnloadedPara").each(function(){
      //console.log();
      $(this).replaceWith("<div>This is some new paragraph</div>");
    });
    
      if (selectedParagraph != ""){
        var divHeight = $("#" + selectedParagraph).offset().top;
        $(window).scrollTop(divHeight);
      }
  }
  
  
  function init()
  {
    var UnloadedPara = 1000;
    var TotalPara = 10000;
    for(var i = 0; i < TotalPara; i++){
      if (i > UnloadedPara){
        $("#result").append("<div id='p" + i + "' class='para'>This is some paragraph " + i + "</div>");
      }
      else{
        $("#result").append("<div id='p" + i + "' class='UnloadedPara'></div>");      
      }
      
      if (i + 1 == TotalPara)
      {
        $("#result").append("<button id='btnAddContent'>Add Content on top</div>");        
      }            
    }
  }