0

個別の ID を持つ一連のセクションを含む長いホームページと、個別のページとして単一の投稿を含むブログで構成されるサイトがあります。

ヘッダーには、ユーザーがホームページにいる場合、ID (#section-one、#section-two など) を使用してさまざまなパネルにクリックすると下にスクロールするメニュー項目があります。この部分はうまく機能しています。

単一のブログ投稿用に 2 番目のメニューを作成しました。これは基本的に同じですが、ホームページのさまざまなパネル (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 に答える