JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<p>TEXT</p>
</div>
<div>
<p>TEXT</p>
</div>
<div style="height:700px">
<p>TEXT</p>
</div>
<div id="letsscroll">
<p>TEXT</p>
</div>
<div style="height:700px">
<p>TEXT</p>
</div>
<div>
<p>TEXT</p>
</div>
<div>
<p>TEXT</p>
</div>
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
                            <div class="modal-dialog modal_dialog_table_activity">
                              <div class="modal-content modal_content_table_type_activity">
                                <div class="modal-header" id="modal-header-details-div">
                                  <h5 class="modal-title" id="exampleModalLabel2"></h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                    </div>
                                    <div class="modal-body" id="modal-body-22">
                                    
                                    </div>

                              </div>
                            </div>
                          </div>
                          <a href="#" id="show-modal-window">SHOW</a>
                          
                          <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
                          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

CSS

.modal-open {
 overflow:hidden
}
.modal-open .modal {
 overflow-x:auto;
 overflow-y:auto
}
.modal {
 position:fixed;
 top:0;
 left:0;
 z-index:1050;
 display:none;
 width:100%;
 height:100%;
 overflow:hidden;
 outline:0
}
.modal-dialog {
 position:relative;
 width:auto;
 margin:.5rem;
 pointer-events:none
}
.modal.fade .modal-dialog {
 transition:-webkit-transform .3s ease-out;
 transition:transform .3s ease-out;
 transition:transform .3s ease-out,-webkit-transform .3s ease-out;
 -webkit-transform:translate(0,-50px);
 transform:translate(0,-50px)
}
@media (prefers-reduced-motion:reduce) {
 .modal.fade .modal-dialog {
  transition:none
 }
}
.modal.show .modal-dialog {
 -webkit-transform:none;
 transform:none
}
.modal.modal-static .modal-dialog {
 -webkit-transform:scale(1.02);
 transform:scale(1.02)
}
.modal-dialog-scrollable {
 display:-ms-flexbox;
 display:flex;
 max-height:calc(100% - 1rem)
}
.modal-dialog-scrollable .modal-content {
 max-height:calc(100vh - 1rem);
 overflow:hidden
}
.modal-dialog-scrollable .modal-footer,
.modal-dialog-scrollable .modal-header {
 -ms-flex-negative:0;
 flex-shrink:0
}
.modal-dialog-scrollable .modal-body {
 overflow-y:auto
}
.modal-dialog-centered {
 display:-ms-flexbox;
 display:flex;
 -ms-flex-align:center;
 align-items:center;
 min-height:calc(100% - 1rem)
}
.modal-dialog-centered::before {
 display:block;
 height:calc(100vh - 1rem);
 height:-webkit-min-content;
 height:-moz-min-content;
 height:min-content;
 content:""
}
.modal-dialog-centered.modal-dialog-scrollable {
 -ms-flex-direction:column;
 flex-direction:column;
 -ms-flex-pack:center;
 justify-content:center;
 height:100%
}
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
 max-height:none
}
.modal-dialog-centered.modal-dialog-scrollable::before {
 content:none
}
.modal-content {
 position:relative;
 display:-ms-flexbox;
 display:flex;
 -ms-flex-direction:column;
 flex-direction:column;
 width:100%;
 pointer-events:auto;
 background-color:#fff;
...

JavaScript

$('#show-modal-window').on('click',function(e){
$('#exampleModal2').modal('show');
$(document).animate({scrollTop: $('#letsscroll').offset().top+'px'}, 400);
e.preventDefault();
});