$("#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>

$("#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>

When I click contact, The bootstrap modal closes as expected but doesn't scroll to contact section, why?

• javascript
• jquery
• html
• twitter-bootstrap

• 3 Assuming you're trying to click the button through the overlay on a bootstrap modal, that's your problem. The click event is captured by the overlay to hide the modal. You need to click the button again once the modal has been hidden to raise the event on it. A better solution would be to hook to the hide.bs.modal event and perform the scroll in there – Rory McCrossan Commented Sep 21, 2016 at 10:37
• any error in console? – Chetan Gawai Commented Sep 21, 2016 at 10:39
• @RoryMcCrossan ok I'll give that a try – Lynob Commented Sep 21, 2016 at 10:39
• @ChetanGawai none – Lynob Commented Sep 21, 2016 at 10:44

2 Answers 2

Don't use the 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);
});

My idea, like you can see in the ments, is based on listening for hide.bs.modal event.

My snippet:

$('#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./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>