锚点点击后scrollTo定位异常：带缩放平移动画的未显示区块偏移问题

我做了一个带锚链接的导航菜单，每个区块用AOS实现滚动触发的入场动画（透明度、位移、缩放变化）。原本想实现点击链接精准滚动到对应区块，但遇到问题：当目标区块还没进入视口（未触发动画）时，用offset().top获取的位置是错的，滚动后定位不准。

涉及代码 #

滚动逻辑 JS

$(document).on('click', 'a[href^="#"]', function (e) {
  e.preventDefault();
  var target = $(this.hash);

  if (target.length) {
    $('html, body').stop().animate({
        scrollTop: target.offset().top
    }, 2000, 'swing');
  }
});

AOS 自定义动画 CSS

[data-aos='zoom-in-down'] {
  transform: translate3d(0, -200px, 0) scale(.6);
}

根本原因 #

AOS会给未触发动画的元素添加transform变换（比如你写的translate3d），而jQuery的offset().top是基于元素变换后的渲染位置计算的，不是它在页面布局里的真实位置，这就导致了偏移值错误。

可行解决方法 #

1. 用原生API获取真实布局位置（推荐）

放弃offset()，改用getBoundingClientRect()获取元素相对于视口的原始位置，再结合当前滚动高度计算目标位置：

$(document).on('click', 'a[href^="#"]', function (e) {
  e.preventDefault();
  const target = $(this.hash);

  if (target.length) {
    // 获取元素在布局中的真实视口位置（不受transform影响）
    const rect = target[0].getBoundingClientRect();
    // 计算最终滚动位置：当前滚动高度 + 元素视口顶部坐标
    const scrollTarget = $(window).scrollTop() + rect.top;
    
    $('html, body').stop().animate({
      scrollTop: scrollTarget
    }, 2000, 'swing');
  }
});

2. 临时移除变换再计算偏移

如果一定要用offset().top，可以在计算前临时清除元素的transform样式，计算完再恢复：

$(document).on('click', 'a[href^="#"]', function (e) {
  e.preventDefault();
  const target = $(this.hash);

  if (target.length) {
    // 保存当前transform样式
    const originalTransform = target.css('transform');
    // 临时移除变换，让offset()计算真实位置
    target.css('transform', 'none');
    const correctTop = target.offset().top;
    // 恢复原样式
    target.css('transform', originalTransform);
    
    $('html, body').stop().animate({
      scrollTop: correctTop
    }, 2000, 'swing');
  }
});

3. 提前触发目标元素的动画

如果允许目标区块提前显示动画，可以在点击时先触发它的AOS动画，再计算滚动位置：

$(document).on('click', 'a[href^="#"]', function (e) {
  e.preventDefault();
  const target = $(this.hash);

  if (target.length) {
    // 标记元素为已动画，强制刷新AOS状态
    target[0].dataset.aosAnimated = 'true';
    AOS.refreshHard();
    
    // 延迟计算，确保样式更新完成
    setTimeout(() => {
      $('html, body').stop().animate({
        scrollTop: target.offset().top
      }, 2000, 'swing');
    }, 100);
  }
});

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