CODEWITHSUNDEEP
jquerybootstrap-modalbootstrap-5
Alireza Ahmadi
Alireza Ahmadi

Reputation: 9893

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/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 3

Views: 912

Answers (1)

Nick Parsons
Nick Parsons

Reputation: 50674

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/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 3

Related Questions