Jquery「scrollTop」＆「height」.click delay issues

Question

在我的代碼中遇到了一些小問題。我已經寫出了一個JQUERY序列，您可以在其中單擊「註冊」，然後在窗體顯示其自身的位置向下滾動。現在我在底部有一個按鈕，功能關閉窗體並將您滾動回頂部。

的例子可以在這裏看到：http://www.icecable.com/sandbox/priority%5Fsign%5Fup/test.html

點擊「註冊」和動畫工作正常。點擊「關閉並返回頂部」，動畫再次正常工作。 問題出現在此之後。

如果您嘗試單擊「立即註冊」按鈕，「高度」動畫將像平常一樣開始，但「scrollTop」動畫沒有明顯的原因會有大的延遲。

這裏是我的代碼

$(document).ready(function() { 

$('.dealer').click(function(e) { 
    e.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: '860' 
    }, 1800, "easeInOutQuint"); 
}); 

$('.top').click(function(e) { 
    e.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: '0px' 
    }, 1500, "easeInOutQuint"); 
}); 

$('.dealer').click(function(e) { 
    e.preventDefault(); 
    $('#priority').animate({ 
    height: 'show' 
    }, 1200, "easeInOutCirc"); 
}); 

$('.top').click(function(e) { 
    e.preventDefault(); 
    $('#priority') 
    .animate({ 
     height: 'hide' 
     }, 590, "easeInQuint"); 

}); 

//Form for Distributors 

$('.distributor').click(function(e) { 
    e.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: '860' 
    }, 1800, "easeInOutQuint"); 
}); 

$('.top').click(function(e) { 
    e.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: '0px' 
    }, 1500, "easeInOutQuint"); 
}); 

$('.distributor').click(function(e) { 
    e.preventDefault(); 
    $('#distributor').animate({ 
    height: 'show' 
    }, 1200, "easeInOutCirc"); 
}); 

$('.top').click(function(e) { 
    e.preventDefault(); 
    $('#distributor') 
    .animate({ 
     height: 'hide' 
     }, 590, "easeInQuint"); 

    }); 
}); 

什麼我做錯了嗎？表單被隱藏後，是否有辦法重置事件？任何幫助/見解/資源將不勝感激！

請問

Answer 1

沒有小提琴，我不能肯定地說，但我建議你使用一些console.log調用打印出來，開始和結束scrollTop值。之前我曾經遇到過這樣的問題，他們通常是由於滾動錯誤的金額和恢復錯誤金額的問題。

您可能不會注意到的可能情況是，當您向後滾動時，您的scrollTop值會超出0而變爲某個負數。該窗口不能滾動到負值scrollTop，因此它必須「等待」，直到該值返回到0才能開始可見動畫。

注意：即使您已將scrollTop設置爲零，也有可能發生這種情況，因爲這可能不是其初始位置。當我說「否定」時，我的意思是「相對於初始位置是負面的」。

更新：看看this page。它還鏈接到corresponding SO post，並告訴您如何平滑滾動到頂部。我之前使用過修改過的代碼版本，儘管它與您的代碼非常相似，但SO帖子可能會給您一些額外的見解。

我也想改變你的animate功能只有"html"元素上調用，而不是兩個"html"元素和"body"元素。