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"元素。