Javascript 使用查询参数滚动到元素时的奇怪行为

以下是滚动到目标的函数：

function navigateTo(target) {
    var elementTop = $('#'+target).offset().top;
    console.log('Navigating to ' + target + ' (' + elementTop + 'px)');
    $('html, body').stop().animate({
        scrollTop: elementTop 
    }, 800, 'swing');
}

当我点击我的导航链接时效果非常好：

$('.nav').on('click', function (e) {
    e.preventDefault();
    var target = $(this).data('target');
    navigateTo(target);
    window.history.pushState(target, target, 'index.html?page=' + target);
});

但是，当我尝试在pageload上使用它和查询参数时，它不会滚动到正确的位置

$(document).ready(function () {
    var page = getUrlParameter('page');
    if (page != false) {
        navigateTo(page);
    }
});

目标元素越深入页面，它就越偏离目标。我错过了什么

我添加了一些日志记录。使用每种方法导航到同一地点：

导航到联系人（3308px）

导航到联系人（3883px）

---

显然，调用是在所有元素加载之前进行的，因此高度不一致。我把所有东西都移到了

load

，而不是

ready

，它工作得很好

$(window).on("load", function() {
    if (getUrlParameter('page') != false) {
        navigateTo(getUrlParameter('page'));
    }
});