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.
Hi Nick,
May I know your Metronic version?
This is the default behavior of Bootstrap Modals and you can use this workaround to prevent the auto scroll:
https://stackoverflow.com/questions/68308075/bootstrap-modal-scrolls-page-to-top
Regards,
âSean,
Keenthemes Support