元素动画后jQuery滚动到元素答案

【问题标题】：jQuery scroll to element after element animation元素动画后jQuery滚动到元素
【发布时间】：2015-09-03 03:05:48
【问题描述】：

我遇到了一些动画滚动问题，并且已经用尽了我的调试工作。简而言之，我想要做的是滚动到用户点击的打开面板。用户单击一系列面板中的一个，该面板打开（动画），新打开的面板滚动到视图中。很简单。

我遇到的问题是，如果我单击已打开面板下方的面板，则滚动会将我的新打开面板拉离屏幕一半。如果我单击已经打开的面板上方的面板，它可以正常工作。不知道发生了什么。我正在使用 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/

【问题讨论】：

标签： javascript jquery css animation scroll

【解决方案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);

【讨论】：

setTimeout 有效。问题肯定是面板关闭动画。执行原始滚动代码行时，面板高度的值仍表示为展开。使用超时解决了这个问题，因为直到超时才执行代码。有趣的是延迟功能确实以相同的方式工作。感谢您的帮助！

【解决方案2】：

尝试删除 .top

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

在这里查看。有用。 https://jsfiddle.net/66zzudo4/1/

【讨论】：

您发送的链接中仍然存在带有 .top 的代码。我从代码中删除了 .top 并且根本没有滚动动画发生。目标是从顶部滚动并打开 75 像素的面板。
哦，对不起。我一定没有保存它。这个对我有用。 jsfiddle.net/66zzudo4/2
不用担心，感谢您的帮助。但是动画滚动根本不会发生。面板只是在原地打开，从不滚动到距顶部 75 像素的视图中。