关闭模式，滚动到div的

Question

$("#contact-form").click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $("#contact-section").offset().top 
 
    }, 2000); 
 
});

<div class="modal fade" id="saModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h3>title</h3> 
 
      </div> 
 
      <div class="modal-body"> 
 
       text 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" id="contact-form" class="btn btn-default pull-right glyphicon glyphicon-envelope">Contact</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div id="contact-section"> 
 
<?php require 'contact.php'; ?> 
 
</div>

当我点击联系人，引导模式关闭的预期，但不会滚动接触部分，为什么呢？

Answer 1

不要使用data-dismiss="modal"

<button type="button" id="contact-form" class="btn btn-default pull-right glyphicon glyphicon-envelope" >Contact</button> 

$("#contact-form").click(function() { 
    $('#myModal').modal('hide'); 
    $('html, body').animate({ 
     scrollTop: $("#contact-section").offset().top 
    }, 2000); 
}); 

Answer 2

我的想法，就像你可以在注释中看到，基于监听hide.bs.modal事件。

我的片段：

$('#saModal').on('hide.bs.modal', function(e) { 
 
    if ($('#saModal').attr('ModalXbuttonPressed') != undefined) { 
 
    $('#saModal').removeAttr('ModalXbuttonPressed'); 
 
    return; 
 
    } 
 
    $('html, body').animate({ 
 
    scrollTop: $("#contact-section").offset().top 
 
    }, 2000); 
 
}); 
 

 
$('#saModal button[class="close"][data-dismiss="modal"]').on('click', function(e) { 
 
    $('#saModal').attr('ModalXbuttonPressed', true); 
 
}); 
 

 

 
$("#contact-form").on('click', function(e) { 
 
    $('#saModal').modal('hide'); 
 
});

#contact-section { 
 
    position: absolute; 
 
    top: 500px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#saModal"> 
 
    Open saModal 
 
</button> 
 
<div class="modal fade" id="saModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h3>title</h3> 
 
      </div> 
 
      <div class="modal-body"> 
 
       text 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" id="contact-form" class="btn btn-default pull-right glyphicon glyphicon-envelope">Contact</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div id="contact-section"> 
 
    <p>contact-section</p> 
 
    <p>contact-section</p> 
 
    <p>contact-section</p> 
 
    <p>contact-section</p> 
 
</div>