本文介绍如何在现有手风琴（accordion）组件中添加点击后自动滚动至页面顶部的功能，兼容单选模式，并通过 window.scrollto() 实现平滑过渡，无需修改 html 结构或引入额外依赖。
本文介绍如何在现有手风琴（accordion）组件中添加点击后自动滚动至页面顶部的功能，兼容单选模式，并通过 window.scrollto() 实现平滑过渡，无需修改 html 结构或引入额外依赖。
要让点击手风琴标题时页面自动滚动到顶部（例如回到导航栏下方），关键在于在用户触发展开/收起逻辑后，立即执行滚动操作。原代码中已具备完整的 accordion 交互逻辑（单选、CSS 动画、高度控制），我们只需在其事件处理末尾插入滚动调用即可，无需新增 .panel 类或重构 DOM。
以下是优化后的 JavaScript 实现（直接替换原脚本）：
// 选择所有手风琴标题按钮
const acc = document.querySelectorAll('.accordion');
acc.forEach(item => {
item.addEventListener('click', function () {
// 先执行原有逻辑：关闭其他项，切换当前项状态
acc.forEach(el => {
if (el.classList.contains('active')) {
closeAcc(el);
} else if (el === item) {
openAcc(el);
}
});
// ✅ 新增：点击后平滑滚动至页面顶部
window.scrollTo({
top: 0,
behavior: 'smooth' // 启用原生 CSS 平滑滚动动画
});
});
});
function closeAcc(el) {
el.classList.remove('active');
el.nextElementSibling.style.maxHeight = null;
}
function openAcc(el) {
el.classList.add('active');
el.nextElementSibling.style.maxHeight = el.nextElementSibling.scrollHeight + 'px';
}⚠️ 注意事项：
- window.scrollTo({ top: 0, behavior: 'smooth' }) 是现代浏览器原生支持的 API，无需 Polyfill（兼容性良好），但若需支持 IE，可降级为 window.scrollTo(0, 0)。
- 若你希望仅滚动到当前激活面板的顶部（而非整个页面顶部），应改用 el.scrollIntoView({ behavior: 'smooth', block: 'start' }) —— 但根据问题需求，此处明确要求“scroll to top of page view”，故采用 top: 0。
- 确保该脚本在 DOM 加载完成后执行（如置于
