如何使用jQuery将选中的手风琴项居中显示？

算力阿峰

2026-7-11

解决手风琴展开后滚动位置不一致的问题

我试过用this.scrollIntoView({behavior: "smooth"})，但点击展开的手风琴标题最终滚动位置总是不对。想改用jQuery的scrollTop()，但刚接触jQuery，不知道该怎么写合适的代码。

问题原因

手风琴展开/收起依赖slideUp()/slideDown()动画，直接调用滚动方法会在动画完成前计算位置——此时容器高度还未完全变化，导致滚动位置偏差。必须等动画结束后再执行滚动操作。

解决方案

在slideDown()的回调函数里触发滚动逻辑，确保手风琴完全展开后再计算目标位置。下面提供两种实现方式：

修改后的Script.js代码

jQuery(function () {
  $(".head").on("click", function () {
    let $this = $(this);
    let isActive = $this.hasClass("active");

    $(".head").removeClass("active");
    $(".head").parent().find(".content").slideUp(280);
    $(".head").parent().find(".arrow").removeClass("arrow-animate");
    
    if (isActive === false) {
      $this.addClass("active");
      $this.parent().find(".arrow").addClass("arrow-animate");
      // 手风琴展开动画完成后执行滚动
      $this.parent().find(".content").slideDown(280, function() {
        // 方法1：jQuery animate实现平滑滚动（兼容性更好）
        $("html, body").animate({
          scrollTop: $this.offset().top - 20 // 减20为顶部预留间距，可按需调整
        }, 400);
        
        // 方法2：原生scrollIntoView写法更简洁
        // $this[0].scrollIntoView({behavior: "smooth", block: "start"});
      });
    }
  });
});

代码说明

把$(this)存为$this变量，避免重复DOM查询，提升性能；
利用slideDown()的回调函数特性，确保滚动操作在动画完全结束后触发；
offset().top获取标题相对于文档的顶部坐标，减去20是为了让标题和页面顶部保留缓冲空间，优化视觉体验；
两种滚动方案可选：jQuery的animate兼容性更强，原生scrollIntoView代码更简洁。

完整代码

Script.js

jQuery(function () {
  $(".head").on("click", function () {
    let $this = $(this);
    let isActive = $this.hasClass("active");

    $(".head").removeClass("active");
    $(".head").parent().find(".content").slideUp(280);
    $(".head").parent().find(".arrow").removeClass("arrow-animate");
    
    if (isActive === false) {
      $this.addClass("active");
      $this.parent().find(".arrow").addClass("arrow-animate");
      $this.parent().find(".content").slideDown(280, function() {
        $("html, body").animate({
          scrollTop: $this.offset().top - 20
        }, 400);
      });
    }
  });
});

index.html

<div class="container">
  <div class="accordion" id="accordion-1">
    <div class="head">
      <h2>Number 1</h2>
    </div>
    <div class="content">
      <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

  <br />

  <div class="accordion" id="accordion-2">
    <div class="head">
      <h2>Number 2</h2>
    </div>
    <div class="content">
      <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

  <br />

  <div class="accordion" id="accordion-3">
    <div class="head">
      <h2>Number 3</h2>   
    </div>
    <div class="content">
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

  <br />

  <div class="accordion" id="accordion-4">
    <div class="head">
      <h2>Number 4</h2>
    </div>
    <div class="content">     
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

  <br />   
 
  <div class="accordion" id="accordion-5">
    <div class="head">
      <h2>Number 5</h2>
    </div>
    <div class="content">     
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
  
</div>

<script src="script.js"></script>

styles.css

body {
  font-family: Lato;
  background: rgb(142, 215, 213);
  overflow-y: scroll;
}

#content::-webkit-scrollbar {
  display: none;
}

strong {
  color: #ffffff;
  font-size: 56px;
}

.content p {
  font-size: 18px;
  font-weight: 600;
}
.container {
  width: 100%;
  margin: 0 auto;
  width: 800px;
}

.preview-pics {
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.3;
  filter: blur(3px);
  transition: 0.2s ease;
}

.preview-pics:hover {
  opacity: 1;
  filter: blur(0);
}

.accordion {
  box-shadow: 0px 1px 7px #dbdbdb;
}

.accordion .head {
  background-color: #ffffff;
  color: #563e6e;
  padding: 20px 30px;
  cursor: pointer;
  transition: 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion .head:hover,
.accordion .active {
  background-color: #ffe77aff;
}

.accordion .arrow-animate {
  transform: rotate(-180deg);
  opacity: 1;
}

.accordion .content {
  background-color: #ffffff;
  display: none;
  padding: 20px 30px;
  color: #333333;
}

#accordion-5 {
  margin-bottom: 48px;
}

内容的提问来源于stack exchange，提问作者Brenden Baio

如何使用jQuery将选中的手风琴项居中显示？

问题原因 #

解决方案 #