从搜索结果点进 /faq#shipping,页面停在问题标题上方八十像素,标题被固定导航整条盖住,收起再展开还会再偏一次。刷新页面重走一次,偏差一样。日志里能对上时间点,这种反而好排。
折叠面板默认高度为零,浏览器在内容展开前就完成了锚点定位,等手风琴撑开,目标元素已经被推下去。固定导航又占掉顶部空间,scroll-margin 没设就正好压住。这一点先确认清楚,后面就不用反复试。
.faq-item {
scroll-margin-top: 96px;
}
document.querySelector(target).scrollIntoView({ block: 'start' });
这次卡住的地方就在「FAQ 锚点错位」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。
处理上按这个顺序:给锚点目标加 scroll-margin-top,数值等于固定导航高度再加八像素余量;链接打开时面板如果还收着,先展开,滚动放到展开后的下一帧;别同时用 scrollIntoView 的 smooth 和手动改 scrollTop,两套滚动会互相打断。
结果对不对很好判断,从外链打开带锚点的地址,问题标题落在导航下方,滚动一次就到位。
