关闭模态并滚动到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事件。

我的片段：

＆＃13;

＆＃13;

$('#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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;