在CSS上禁用滚动时使用jQuery滚动

Question

我想使用jQuery动画滚动页面但是在CSS中禁用滚动并且它不允许动画发生：

$('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
});


$('html, body').animate({
    scrollTop: 939
}, 2500);

这是小提琴：http://jsfiddle.net/AKPHB/1/

Answer 1

如果设置overflow：hidden，则不会发生滚动事件。因此，您也无法使用动画触发它。实际上，如果用户无法滚动，那么动画滚动的重点是什么：p

一种解决方案是将内容包装在另一个容器中，然后为容器设置动画，如下所示：

演示：http://jsfiddle.net/AKPHB/10/

<div id="content">
    <div class="text">text</div>
    <div class="text">text</div>
</div>

CSS：

#content{position:relative}

和Javascript：

$('#content').animate({ top: -939 });

Answer 2

我建议改用margin-top。对用户的影响是相同的，因为没有滚动条：

Demo

$('html, body').animate({
    "margin-top": -100,
    "height": "+=200"     // Fix height to show additional content   
}, 2500);