当导航栏中多个子菜单使用 height 过渡动画且需“一开一关”切换时，浏览器因 dom 高度突变触发意外滚动，导致新打开的菜单被推离视口。本文提供一种基于 transitionend 回调 + 精确 scrolltop 计算的平滑解决方案，确保目标菜单标题始终锚定在导航栏顶部可视区域。
当导航栏中多个子菜单使用 height 过渡动画且需“一开一关”切换时，浏览器因 dom 高度突变触发意外滚动，导致新打开的菜单被推离视口。本文提供一种基于 transitionend 回调 + 精确 scrolltop 计算的平滑解决方案，确保目标菜单标题始终锚定在导航栏顶部可视区域。
在具有高度过渡动画（transition: height 325ms ease）的折叠式导航栏中，若用户快速点击下方的子菜单项（如从“Submenu 1”切换到“Submenu 2”），系统会同时触发展开新菜单与收起旧菜单。由于两者 height 变化同步发生，父容器 .navbar 的总高度瞬时波动，触发浏览器自动滚动以维持原视口位置——结果往往是新打开的子菜单标题（如“Submenu 2”）被滚出可视区域顶部，严重影响可用性。
核心问题在于：过渡动画期间 DOM 布局变化不可预测，直接调用 scrollIntoView() 或立即计算 offsetTop 会因旧菜单尚未完全收起、新菜单尚未完全展开而获取错误坐标。
✅ 正确解法是：将滚动定位逻辑延迟至所有相关 transition 完全结束之后执行，并基于当前稳定布局重新计算目标位置。 具体实现如下：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
1. 改造 toggleSubmenu：支持回调函数
为 toggleSubmenu 添加可选的 callback 参数，在 transitionend 事件触发时调用，确保 DOM 已完成最终渲染：
function toggleSubmenu($submenu, isOpen, callback) {
const $submenuContent = $submenu.find(".submenu-content");
if (isOpen) {
// 展开：先设为 scrollHeight，再添加 opened 类
$submenuContent.css("height", $submenuContent.get(0).scrollHeight);
$submenu.addClass("opened");
} else {
// 收起：先强制设为 scrollHeight（触发重排），再设为 0
$submenuContent.css("height", $submenuContent.get(0).scrollHeight);
$submenuContent.get(0).offsetHeight; // 强制重排
$submenuContent.css("height", 0);
$submenu.removeClass("opened");
}
// 绑定一次性的 transitionend 事件
$submenuContent.off('transitionend').on('transitionend', function() {
if (typeof callback === 'function') {
callback($submenu);
}
});
}2. 在点击事件中触发带回调的切换
当用户点击新菜单项时，先关闭所有已开菜单，再打开目标菜单，并传入滚动定位逻辑作为回调：
$(".submenu-title").on("click", function() {
const $submenuTitle = $(this);
const $submenu = $submenuTitle.closest(".submenu");
const $navbar = $('.navbar');
// 关闭其他已开菜单
$submenu.siblings(".submenu.opened").each(function() {
toggleSubmenu($(this), false);
});
// 打开当前菜单，并在 transition 结束后滚动定位
toggleSubmenu($submenu, !$submenu.hasClass("opened"), function(openedSubmenu) {
if (openedSubmenu.hasClass("opened")) {
// 计算目标菜单标题在 navbar 内的相对偏移（考虑 navbar 当前滚动位置）
const offsetTop = openedSubmenu.offset().top - $navbar.offset().top + $navbar.scrollTop();
// 平滑滚动至该位置（时长与 transition 一致，视觉更连贯）
$navbar.animate({ scrollTop: offsetTop }, 325);
}
});
});✅ 关键细节说明：
- offset().top - $navbar.offset().top + $navbar.scrollTop() 是精准计算目标元素在滚动容器内坐标的核心公式，避免因全局页面偏移或嵌套定位导致误差；
- 使用 animate({ scrollTop: ... }) 而非原生 scrollTo()，确保滚动时长（325ms）与 CSS transition 严格同步，体验更自然；
- off('transitionend').on(...) 防止重复绑定事件，避免多次触发回调；
- 所有 DOM 操作均在 jQuery 封装下完成，兼容性好，逻辑清晰。
⚠️ 注意事项：
- 若子菜单内容动态加载（如异步渲染），需确保 scrollHeight 计算发生在内容就绪后；
- 在移动端 Safari 中，transitionend 可能偶发不触发，建议增加超时兜底（如 setTimeout 500ms 后执行回调）；
- 避免对 .navbar 同时设置 overflow-y: scroll 和 position: fixed 以外的复杂定位组合，否则 offset() 计算可能失准。
此方案无需等待全部动画结束再操作（牺牲响应性），也不强制串行开关（破坏交互动效），而是精准把握动画终点，以最小干预完成视觉锚定，真正兼顾性能、体验与可维护性。
