Question

这是滚动到目标的函数：

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）

Answer 1

显然是在所有元素加载之前进行了调用，因此高度差异很大。我把所有内容都移到了load而不是ready，而且效果很好。

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

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

1 个答案: