使用jQuery滾動時的CSS

Question

被禁用滾動我想使用jQuery動畫以滾動頁面，但滾動的CSS禁用它不允許動畫發生：

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


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

這裏的小提琴：http://jsfiddle.net/AKPHB/1/

Answer 1

如果設置溢出：隱藏，滾動事件不會發生。所以你也不能使用動畫來觸發它。真的，什麼是動畫滾動的，如果用戶無法反正滾動點：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);