$(document).ready()函数异常：页面跳转滚动位置不正确，刷新后恢复

嘿，这个问题我之前也碰到过！本质原因很简单：从首页跳转到二级页面时，你在DOM刚解析完就执行了滚动逻辑，但页面里的图片、动态内容还没加载完，导致目标div的实际位置还没稳定，offset().top拿到的是错误值——而刷新页面时所有资源都加载好了，所以计算就正常了。

问题核心 #

$(document).ready()只会等待DOM结构加载完成，不会等图片、字体这类外部资源加载完毕。如果目标div的位置依赖这些未加载的资源（比如div里有图片，图片高度还没撑开），那这时候获取的offset().top肯定不准。

修复代码 #

我们换成$(window).on('load', ...)来等待所有资源加载完成，同时加一些边界判断避免报错：

var locationString = window.location.hash;
// 处理哈希值为空或者格式无效的情况
if (!locationString || locationString === '#' || !$(locationString).length) {
  return;
}

var headerHeight = -70;

$(window).on('load', function() {
  var targetDiv = $(locationString);
  var divTop = targetDiv.offset().top + headerHeight;
  
  console.log('目标哈希:', locationString, '原始顶部位置:', targetDiv.offset().top, '调整后滚动位置:', divTop);
  
  // 执行滚动动画
  $('html, body').animate({
    scrollTop: divTop
  }, "slow");
});

额外小技巧 #

如果你的页面有AJAX加载的内容，或者某些元素是动态生成的，那可能还要在内容加载完成后再触发一次滚动。另外，极端情况下可以加个微小的延迟确保万无一失：

$(window).on('load', function() {
  // 100ms延迟，给浏览器足够时间渲染元素
  setTimeout(function() {
    var targetDiv = $(locationString);
    if (targetDiv.length) {
      $('html, body').animate({
        scrollTop: targetDiv.offset().top + headerHeight
      }, "slow");
    }
  }, 100);
});

这个延迟时间可以根据你的页面实际情况调整，一般100-300ms就足够了。

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