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/

jQuery在元素动画后滚动到元素

2 个答案: