Bootstrap accordion点击后滚动到激活项顶部无回弹问题如何解决？

根因说明 #

回弹问题的核心是原有逻辑的事件触发时机和偏移计算逻辑不匹配：show.bs.collapse 事件触发时，上方已打开的折叠项刚启动关闭动画，此时计算的面板位置是折叠项关闭前的位置，随着上方折叠项收缩，页面整体高度变小，预先计算的滚动目标位置就会出现偏差，最终导致回弹。

优化后代码 #

// 滚动状态锁，避免重复触发动画
let isProcessingScroll = false;

$('.panel-collapse').on('show.bs.collapse', function(e) {
  if (isProcessingScroll) return;

  const $targetPanel = $(this).closest('.panel');
  const $accordionGroup = $targetPanel.closest('.panel-group');
  // 筛选出除当前点击项外所有已打开的折叠项
  const $openedPanels = $accordionGroup.find('.panel-collapse.in').not(this);
  const headerHeight = $('.menu-container').outerHeight() || 0;

  // 累加目标面板上方所有即将关闭的折叠项内容高度
  let closedTotalHeight = 0;
  $openedPanels.each(function() {
    const $panel = $(this).closest('.panel');
    // 只计算在目标面板上方的已打开项
    if ($targetPanel.prevAll().has($panel).length) {
      closedTotalHeight += $(this).height();
    }
  });

  // 计算最终目标滚动位置
  const targetScrollTop = $targetPanel.offset().top - closedTotalHeight - headerHeight;

  isProcessingScroll = true;
  $('html,body').stop(true).animate({
    scrollTop: targetScrollTop
  }, {
    // 滚动动画时长和Bootstrap默认折叠动画时长保持一致，默认350ms，自定义过折叠动画的话同步修改即可
    duration: 350,
    complete: () => {
      isProcessingScroll = false;
    }
  });
});

// 可选：用户手动操作时中断自动滚动，避免冲突
$(window).on('mousedown touchmove scroll', () => {
  if (isProcessingScroll) {
    $('html,body').stop(true);
    isProcessingScroll = false;
  }
});

优化点说明 #

• 统一累加目标面板上方所有即将关闭的折叠项高度，避免单条判断遗漏
• 滚动动画时长和Bootstrap折叠动画默认时长对齐，让滚动动作和上方折叠项收缩动作完全同步，不会出现位置偏差
• 增加状态锁避免连续点击触发多次动画错乱
• 增加用户手动操作中断逻辑，避免自动滚动和用户操作冲突

如果对折叠动画做过自定义修改，只要把代码里的duration值和你自定义的折叠动画时长保持一致即可。

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