0

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

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

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

我正在使用下面的 jQuery 来创建滚动效果。目前它使用setTimeout的值为 0，这导致了一个问题 - 滚动在页面完全加载之前运行，并在错误的位置停止。如果我将“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();
}

});
4

1 回答 1

0

为什么不在$(document).ready()回调中启动动画，直到页面加载后才开始？

$(document).ready(function() {

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

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

});
于 2013-09-02T15:51:29.477 回答