jsFiddle

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

jsFiddle

$(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或使用here描述的属性来识别初始scrollTop。

最后，您可以尝试本机setInterval或setTimeout方法，但这可能意味着遇到问题，因为有几种方法可以处理帧速率。

动画滚动到加载时锚定

2 个答案:

jsFiddle