jQuery在元素動畫之后滾動到元素

Question

我遇到了一些動畫滾動問題，並且用盡了所有的調試工作。 簡而言之，我想做的是在用戶單擊時滾動到一個打開的面板。 用戶單擊一系列面板中的一個，該面板將打開（動畫），新打開的面板會滾動到視圖中。 很簡單。

我遇到的問題是，如果我單擊已經打開的面板下面的面板，則滾動會將我的新打開的面板拉到屏幕的一半。 如果單擊已經打開的面板上方的面板，則可以正常工作。 不知道發生了什么。 我正在使用CSS對面板開口進行動畫處理，並使用jQuery對滾動進行動畫處理。 我假設有一些導致問題的動畫隊列計時，但我不知道。 我什至試圖延遲滾動動畫以等待面板完成其動畫，但這也無濟於事。 例如：

$('html, body').delay(1000).animate({scrollTop: $(this).offset().top - 75}, 250);

代替

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

無論如何，任何幫助將不勝感激。 您可以在這里找到我正在使用的代碼： https : //jsfiddle.net/66zzudo4/

更新：您可以在這里找到工作代碼： https : //jsfiddle.net/66zzudo4/4/

Answer 1

我相信使用超時將起作用：

setTimeout(function() {
    $('html, body').animate({scrollTop: $(this).offset().top - 75}, 250);
}, 1000);

或者，動畫完成時，jQuery animate也將回調作為參數：

$('html, body').animate({scrollTop: $(this).offset().top - 75}, function() {
 //Animation complete, do something now like animate other stuff.
}, 250);

Answer 2

嘗試刪除.top

  $('html, body').animate({
                scrollTop: $(this).offset() - 75
            }, 250);

在這里檢查。 有用。 https://jsfiddle.net/66zzudo4/1/