Search code examples
jquerybootstrap-modalbootstrap-5

scrollTop does not work on modal content in bootstrap 5 when I use 'modal-dialog-scrollable' class

Bootstrap added new scroll feature with modal-dialog-scrollable class to make only the modal-body content scrollable. But it seems scrollTop: 0 does not work with that class.

In other words I have a modal that it's content is scrollable (by adding modal-dialog-scrollable class) and I want to go at the top of the modal when I click on Scroll to top button.

I have tried $('#scrollableModal').animate({ scrollTop: 0 }, 500); but nothing happened.

Here is full working sample:

$(document).on('click', '.scroll', function() {
  $('#scrollableModal').animate({scrollTop: 0}, 500);
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal fade" id="scrollableModal">
  <div class="modal-dialog modal-dialog-scrollable">
    <form method="post" class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title">Scollable Modal</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body py-4">

        <p>
          This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This
          is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see
          scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long
          test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,
          test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This
          is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see
          scroll,
        </p>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-success scroll">Scroll to top</button>
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fas fa-times-circle pe-1"></i> Close</button>
      </div>

    </form>
  </div>
</div>

<a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#scrollableModal"><i class="fas fa-plus-circle"></i> Open Modal</a>

Solution

  • The scrollable content is the modal body (.modal-body), so you need to apply the animate({scrollTop: 0}) method to that instead of #scrollableModal. This will scroll to the top of the content within your modal:

    $(document).on('click', '.scroll', function() {
  $('.modal-dialog-scrollable .modal-body').animate({
    scrollTop: 0
  }, 500);
});
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal fade" id="scrollableModal">
  <div class="modal-dialog modal-dialog-scrollable">
    <form method="post" class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title">Scollable Modal</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body py-4">

        <p>
          This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This
          is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see
          scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long
          test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,This is long test to see scroll,
        </p>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-success scroll">Scroll to top</button>
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fas fa-times-circle pe-1"></i> Close</button>
      </div>

    </form>
  </div>
</div>

<a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#scrollableModal"><i class="fas fa-plus-circle"></i> Open Modal</a>