将模态滚动到顶部时遇到问题

Question

我正在创建一个代码片段，我在将模态滚动到顶部位置时遇到问题。 滚动到顶部模态弹出窗口的目的，我将在其中显示表单验证消息。

我已经尝试了以下 jQuery 代码。

 //Click event to scroll to top $(".signIn-btn").click(function() { $("#largeModal").scrollTop(0); });

 .modal-body { height: 250px; overflow-y: auto; } .modal-body-inner { height: 100%; }

 <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <div class="container"> <h1 class="display-4 text-center mb-4">Bootstrap Modal</h1> <div class="row mb-4"> <div class="col text-center"> <h3>The Large Modal</h3> <a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#largeModal">Click to open Modal</a> </div> </div> </div> <!-- large modal --> <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Sign In</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="modal-body-inner"> <p>Modal Message At Top</p> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> </div> <div class="form-group"> <label for="inputAddress">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="form-group"> <label for="inputAddress2">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputCity">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="form-group col-md-4"> <label for="inputState">State</label> <select id="inputState" class="form-control"> <option selected="">Choose...</option> <option>...</option> </select> </div> <div class="form-group col-md-2"> <label for="inputZip">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> Check me out </label> </div> </div> <button type="submit" class="btn btn-primary signIn-btn">Sign in</button> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 1

您必须使用滚动条指定元素，在本例中为.modal-body 。 试试看

$(".signIn-btn").click(function() {
    $("#largeModal .modal-body").scrollTop(0);
});

Answer 2

不要编写自定义 css 来创建滚动条，因为 Bootstrap4 为modal-body部分modal-dialog-scrollable预定义了类modal-dialog-scrollable 。
并使用$('#largeModal .modal-body').animate({scrollTop: 0},500); 对于 modal-body 滚动到顶部。
文档： https : //getbootstrap.com/docs/4.4/components/modal/#scrolling-long-content

注意：在Full page模式下检查以下代码段。

我希望下面的片段会对你有很大帮助。

 $(document).on('submit', '#formID', function(){ $('#largeModal .modal-body').animate({ scrollTop: 0 },500); return false; });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <div class="container"> <h1 class="display-4 text-center mb-4">Bootstrap Modal</h1> <div class="row mb-4"> <div class="col text-center"> <h3>The Large Modal</h3> <a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#largeModal">Click to open Modal</a> </div> </div> </div> <!-- large modal --> <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-scrollable"> <form action="#" method="post" class="modal-content" id="formID"> <div class="modal-header bg-light"> <h4 class="modal-title" id="myModalLabel">Sign In</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="modal-body-inner"> <div class="alert alert-danger" role="alert"> <strong>Modal Message At Top</strong> A simple danger alert—check it out! </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> </div> <div class="form-group"> <label for="inputAddress">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="form-group"> <label for="inputAddress2">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputCity">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="form-group col-md-4"> <label for="inputState">State</label> <select id="inputState" class="form-control"> <option selected="">Choose...</option> <option>...</option> </select> </div> <div class="form-group col-md-2"> <label for="inputZip">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> </div> <div class="form-group"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> Check me out </label> </div> </div> </div> </div> <div class="modal-footer justify-content-start w-100"> <button type="submit" class="btn btn-primary px-4 signIn-btn">Sign in</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </form> </div> </div>