锚点滚动定位异常：移动端Chrome未正确计算固定导航栏高度

看起来你遇到了移动端Chrome特有的滚动计算兼容坑，这种浏览器差异确实挺闹心的！从你描述的情况来看，桌面Chrome和移动端Edge都能乖乖识别固定导航栏的高度，但移动端Chrome偏偏“无视”了这个值，大概率是因为移动端Chrome的视口计算逻辑、地址栏动态变化，或者jQuery的尺寸获取方法在移动端的兼容性问题导致的。

我之前也踩过类似的坑，给你几个针对性的解决方案，你可以挨个试试：

• 换成更可靠的尺寸获取方式
  jQuery的outerHeight()在移动端Chrome中，可能因为初始加载时地址栏的存在，计算的高度和实际滚动时的高度不一致。换成原生的getBoundingClientRect().height能直接获取元素当前渲染的实际高度，不受视口变化的影响。同时目标元素的偏移量计算也换成原生方法，避免jQuery的offset()在移动端的兼容性问题：

  scrollTo: function (anchor) {
      // 实时获取导航栏的实际渲染高度
      const headerEl = $('#main-header')[0];
      const headerHeight = headerEl ? headerEl.getBoundingClientRect().height : 0;
      const targetEl = $('#' + anchor);
      if (targetEl.length) {
          // 计算目标元素相对于文档的绝对偏移量
          const targetRect = targetEl[0].getBoundingClientRect();
          const targetOffset = targetRect.top + window.pageYOffset;
          $('html, body').animate({
              'scrollTop': targetOffset - headerHeight
          }, 500);
      }
  },
  

• 处理移动端Chrome的地址栏动态变化
  移动端Chrome的地址栏会在滚动时自动隐藏/显示，这会改变window.innerHeight，可能导致之前缓存的导航栏高度失效。所以一定要每次滚动触发时都实时计算高度，不要提前缓存这个值，确保每次都用最新的渲染尺寸。

• 强制触发浏览器回流（如果上面的方法没用）
  有时候移动端Chrome会延迟渲染计算，导致尺寸获取不准。可以在计算前加一行代码强制触发回流，让浏览器先更新所有元素的尺寸和位置：

  scrollTo: function (anchor) {
      // 强制触发浏览器回流，确保尺寸计算准确
      document.body.offsetHeight;
      
      const headerEl = $('#main-header')[0];
      const headerHeight = headerEl ? headerEl.getBoundingClientRect().height : 0;
      const targetEl = $('#' + anchor);
      if (targetEl.length) {
          const targetRect = targetEl[0].getBoundingClientRect();
          const targetOffset = targetRect.top + window.pageYOffset;
          $('html, body').animate({
              'scrollTop': targetOffset - headerHeight
          }, 500);
      }
  },
  

• 检查导航栏的CSS属性
  确保导航栏没有设置transform、opacity等可能导致浏览器创建独立渲染层的属性，这些属性有时候会干扰元素尺寸的计算。另外确认导航栏的position确实是fixed、top: 0，没有额外的margin/padding导致高度计算偏差。

你可以先试试第一种方案，这个方法在我之前的项目里解决了90%的移动端Chrome滚动定位问题。如果还是有问题，再检查CSS或者加回流触发的代码。

内容来源于stack exchange