如何将手风琴滚动到顶部以在Bootstrap中打开内容？

在 Bootstrap 中，手风琴是一种常用的折叠内容的组件，通常用于在有限的空间内展示大量信息。但是，当手风琴内容较长时，在打开内容时可能会出现内容未显示完全的情况。因此，本文将介绍如何在 Bootstrap 中通过滚动将手风琴打开的内容推至顶部。

实现方式

第一种方式：jQuery

我们可以通过 jQuery 的 scrollTop() 方法实现将手风琴打开的内容推至顶部。具体方法如下：

1. 给手风琴添加 id 属性，以便于通过 jQuery 获取该元素。

<div id="accordion">
  <!-- 手风琴内容 -->
</div>

2. 在手风琴内部添加一个 shown.bs.collapse 事件监听器。这个监听器会在手风琴展开时被触发。

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <!-- 将手风琴打开的内容推至顶部 -->
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
    $('#accordion').on('shown.bs.collapse', function() {
      $(this).find('.card-body').scrollTop(0);
    });
  });
</script>

通过以上操作，当手风琴的内容被打开时，页面会自动将内容滚动至顶部。切记在手风琴初始化时，需要给其中一个手风琴添加 show 类，让它默认展开。

第二种方式：JavaScript

使用 JavaScript 也可以实现手风琴打开时将内容推至顶部的效果。具体方法如下：

1. 给手风琴添加 id 属性。

<div id="accordion">
  <!-- 手风琴内容 -->
</div>

2. 在 onclick 事件中添加一个函数，该函数将手风琴打开的内容推至顶部。

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" onclick="scrollToTop()" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <!-- 将手风琴打开的内容推至顶部 -->
      </div>
    </div>
  </div>
</div>

<script>
  // 定义 scrollToTop() 函数
  function scrollToTop() {
    document.querySelector('#accordion .collapse.show .card-body').scrollTop = 0;
  }
</script>

使用 JavaScript 的优点在于不需要引入 jQuery 库，减小了页面的加载量。

结语

通过以上两种方式，我们可以轻松地将手风琴展开时的内容推至顶部。需要注意的是，在手风琴初始化时，必须给其中一个手风琴添加 show 类，让它默认展开。