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

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 或此处描述的属性来识别初始 scrollTop 。

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