單擊並滾動頂部

Question

我遇到了部分戰士中的offset.top問題。 http://jsfiddle.net/sz8YP/1/

即是說，點擊下一個戰鬥機後，車輪壓得太遠。

$(".list-fighters li .toogle").click(function(e) { 
    $(".list-fighters li").removeClass("open"); 
    $(this).parent("li").toggleClass("open"); 
    $('html, body').animate({scrollTop: $(this).offset().top}, 100); 
}); 

有沒有辦法解決它？

Answer 1

你需要調用scrolltop()在超時，給DOM的時間從以前的通話$(".list-fighters li").removeClass("open");是修改了頁面的高度，這樣的更新offset().top：

var deez = this; 
setTimeout(function() { 
    $('html, body').animate({scrollTop: $(deez).offset().top}, 100); 
}, 300); 

測試後，更新到300ms以趕上身高的更新。

Answer 2

這都是因爲你有幾個動畫在同一時間。其中一些用JavaScript定義，一些用CSS定義。

CSS（main.css的：233）

.list-fighters li { 
    transition: height 350ms ease; 
    -webkit-transition: height 350ms ease; 
} 

的JavaScript

$('html, body').animate({scrollTop: $(this).offset().top}, 100); 

正如你可以看到你開始動畫坍塌開戰鬥機的描述，它需要350ms更新它的高度。你需要的是等待這段時間，讓所有元素都有適當的高度。

var that = this; 
setTimeout(function() { 
    $('html, body').animate({scrollTop: $(that).offset().top}, 100); 
}, 350);