jquery - 読み込み時にアンカーへのスクロールをアニメーション化する

Question

ロード時に紫色のブロックを越えてヘッダーにアニメーション化しようとしています

実際の例

HTML

<div id="block">
block</div>

<div id="header">
Header</div>

CSS

#block {
    background: #342A7E;
    color: white;
    height: 200px;
}
#header {
    background: #3DB84E;
    color: white;
    height: 400px;
}

JS

    $(document).ready(function()
{
     $("html,body").animate({scrollTop: -200}, 1000);
});

ありがとう

Answer 1

jsフィドル

$(document).ready(function() {
    $("html,body").animate({scrollTop: 200}, 1000);
});

Answer 2

おまけとして：

パフォーマンスに対処するには、オブジェクト アニメーションを使用することをお勧めします。

var start = {v:0},
    end = {v: 200},
    duration = 10000,
    stepFunction = function stepFunction(v) {
        window.scrollTo(0,v);
    };

$(start).animate(end, {
    duration: duration,
    step: stepFunction,
    complete: stepFunction
});

これは約 30% 効率的であり、この割合は祖先のブラウザーで高くなります。

そこでは、jQuery、またはここで説明されているプロパティを使用して、最初の scrollTop を識別できます。

最後に、ネイティブの setInterval または setTimeout メソッドを試すことができますが、フレームレートを処理する方法がいくつかあるため、問題が発生する可能性があります。