当我使用 'modal-dialog-scrollable' class 时，scrollTop 不适用于 bootstrap 5 中的模态内容

Question

Bootstrap 添加了新的滚动功能 modal-dialog-scrollable class 使只有模态主体内容可滚动。但似乎 scrollTop: 0 不适用于 class.

换句话说，我有一个模态，它的内容是可滚动的（通过添加 modal-dialog-scrollable class），当我点击 [=18= 时，我想转到模态的顶部]按钮。

我试过了$('#scrollableModal').animate({ scrollTop: 0 }, 500);但是没有任何反应。

这是完整的工作示例：

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

Answer 1

可滚动的内容是模态主体（.modal-body)，因此您需要对其应用 animate({scrollTop: 0}) 方法而不是 #scrollableModal。这将滚动到内容的顶部在你的模式中：

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

当我使用 'modal-dialog-scrollable' class 时，scrollTop 不适用于 bootstrap 5 中的模态内容

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

jquery

bootstrap-modal

bootstrap-5