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');

});

链接到页面，加载页面，然后滚动到div

1 个答案: