嘿，这个需求太合理了——长单页里折叠完章节还停在中间位置，用户体验确实有点别扭！我来给你几个实用的实现思路，直接结合你现有的折叠功能就能搞定：

核心逻辑 #

在用户触发章节折叠的动作完成后，获取该章节元素的顶部位置，调用浏览器的平滑滚动API将页面定位到对应位置即可。

1. 原生scrollIntoView（最简单推荐） #

如果你的章节有统一的类名（比如.chapter-section），直接在折叠事件里加这段代码就行：

// 假设你的折叠按钮都有.collapse-trigger类
document.querySelectorAll('.collapse-trigger').forEach(trigger => {
  trigger.addEventListener('click', function() {
    // 获取当前按钮所属的章节元素
    const targetSection = this.closest('.chapter-section');
    // 先执行你已有的折叠逻辑（比如切换类名控制显示/隐藏）
    targetSection.classList.toggle('collapsed');
    
    // 只有折叠动作触发时才滚动
    if (targetSection.classList.contains('collapsed')) {
      targetSection.scrollIntoView({
        behavior: 'smooth', // 启用平滑滚动
        block: 'start' // 章节顶部对齐视图顶部
      });
    }
  });
});

这个方法完全原生，不需要额外依赖，现代浏览器都支持，省心又靠谱。

2. 手动计算位置用window.scrollTo（适合需要偏移的场景） #

如果页面顶部有固定导航栏，不想让导航挡住章节标题，就用这个方式手动调整滚动位置：

trigger.addEventListener('click', function() {
  const targetSection = this.closest('.chapter-section');
  targetSection.classList.toggle('collapsed');
  
  if (targetSection.classList.contains('collapsed')) {
    // 计算章节相对于文档顶部的绝对位置
    const sectionTop = targetSection.getBoundingClientRect().top + window.pageYOffset;
    // 减去固定导航栏的高度（如果有的话）
    const navOffset = document.querySelector('.fixed-navbar')?.offsetHeight || 0;
    
    window.scrollTo({
      top: sectionTop - navOffset,
      behavior: 'smooth'
    });
  }
});

3. 避坑小提醒 #

• 如果你的章节用了CSS过渡/动画（比如高度渐变），记得把滚动代码放在动画结束的回调里，不然滚动位置会不准：

  targetSection.addEventListener('transitionend', function(e) {
    // 只在高度动画结束且是折叠状态时触发滚动
    if (e.propertyName === 'height' && this.classList.contains('collapsed')) {
      this.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, { once: true }); // 确保只触发一次，避免重复执行
  

• 一定要加判断：只有折叠动作才触发滚动，展开章节时不需要，不然用户展开内容反而被滚走会很困惑。

这样调整后，用户折叠章节就能自动平滑回到章节顶部，体验顺畅多啦！

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