链接到页面、加载页面和滚动到 div

Question

我有一个网站，它由一个很长的主页组成，其中包含一系列具有不同 ID 的部分，以及一个包含单个帖子作为单独页面的博客。

在标题中有菜单项，如果用户在主页上，则在单击时使用 ID（#section-one、#section-two 等）向下滚动到各个面板。这部分运行良好。

我为单个博客文章制作了第二个菜单，该菜单基本相同，但链接到主页上的各个面板（www.website.com/home/#section-one 等）。我希望这些也能很好地滚动，这样当用户点击时，主页会加载，然后向下滚动到右侧部分。

我正在使用下面的 jQuery 来创建滚动效果。目前它使用值为 0 的setTimeout，这导致了一个问题 - 滚动在页面完全加载之前运行，并在错误的位置停止。如果我将“setTimeout”的值设置为更高的值，则会在滚动运行之前加载主页时产生丑陋的闪烁/暂停。

是否有另一种排序方式，以便页面加载，脚本等到它在动画触发之前完全加载？

这是我目前所拥有的：

var jump = function (e) {
if (e) {
    e.preventDefault();
    var target = $(this).attr("href");
} else {
    var target = location.hash;
}

$('html,body').animate({
    scrollTop: $(target).offset().top - 70
}, 1500, 'easeInOutCubic');

};

$('html, body').hide();

$(document).ready(function () {

$('a[href^=#]').bind("click", jump);

if (location.hash) {
    setTimeout(function () {
        $('html, body').scrollTop(0).show();
        jump();
    }, 0);

} else {
    $('html, body').show();
}

});

Answer 1

为什么不在$(document).ready() 回调中启动动画，以便在页面加载之前它不会启动？

$(document).ready(function() {

    $('a[href^=#]').bind("click", jump);

    $('html,body').animate({scrollTop: $(target).offset().top - 70}, 1500, 'easeInOutCubic');

});