JSFiddle - React, Tailwind, and code Playground

HTML

<div id="A" style="background-color: red;">
  A
</div>
<div style="background-color: green; height: 500px;">
  B
</div>
<div style="background-color: blue;">
  C
  <input type="button" id="mybutton" value="Stay in position">
  <input type="button" id="otherbutton" value="Do not stay in position">
</div>

JavaScript

$("#mybutton").click(function() {
        //Save the vertical position of the button before content is added.
        var x1 = $(this).offset().top;
        //Do whatever the button is suppose to do, including adding the new content.
        doAllTheStuff();
        //See how much we moved.
        var x2 = $(this).offset().top;
        var dx = x2 - x1;
        //Scroll the same amount to keep the button from moving on the screen.
        $(document).scrollTop($(document).scrollTop() + dx);
    });
    
    $("#otherbutton").click(function() {
        doAllTheStuff();
    });
    
    function doAllTheStuff() {
       $("#A").height(500);
    }