We have a long page with buttons at the bottom of the page that open up modals. Each time a user clicks these buttons to open the modal, the page scrolls back up to the top.

I use a Javascript to create these modals on the fly:
function modalPage(title, url){
let mid = Math.random().toString(36).substring(7);
$("#tnet-modal-container").html("<span id='tnet-modal-click-"+mid+"' data-toggle='modal' data-target='#tnet-modal-"+mid+"' class='tnet-modal'></span><div class='modal fade shadow-lg' data-backdrop='static' id='tnet-modal-"+mid+"' tabindex='-1' role='dialog' aria-labelledby='staticBackdrop' aria-hidden='true'><div class='modal-dialog modal-dialog-scrollable modal-xl' role='document'><div class='modal-content'><div class='modal-header'><h5 class='modal-title' id='ModalLabel'>"+title+"</h5><button type='button' class='close' data-dismiss='modal' aria-label='Close'><i aria-hidden='true' class='ki ki-close'></i></button></div><div class='modal-body' data-height='300' id='tnet-modal-body-"+mid+"'>Loading page...</div></div></div></div>");
$("#tnet-modal-click-"+mid+"").click();
$("#tnet-modal-body-"+mid+"").load(url);
}

The first part of the code adds the html required for the modal into a element $("#tnet-modal-container");
The second part then creates a on click event to open the modal;
The third part then loads the data that will be displayed in the modal;

All of this works perfectly well, except for the fact that when the modal opens, the body scrolls al the way back to the top of the page.