ScrollTo与所有浏览器一起使用但多次完成回调

Question

我已经读过这是使用body和html标签在Jquery中滚动和动画的正确方法。但是，如果$("body, html")仅显示列表中的两个项目，则还会多次触发回调事件。我最多会想到2，每次迭代之后它都会上升，我不知道为什么，但是我需要用他的设置执行一次回调？任何修复？

 $("body, html").animate({ scrollTop: top }, function () {
     animateScroll($topItem);
 });

Answer 1

使用$("body, html")，您将选择两个元素进行动画处理，第一个正文和第二个html。那是因为两次回调都被触发了，就像它应该的那样。

请参阅此处的说明：Callback of .animate() gets called twice jquery

尝试按如下方式更改代码：

$("html body").animate({ scrollTop: top }, function () {
    animateScroll($topItem);
});

Answer 2

您可以尝试以下解决方法：

var callbackFired=false;
$("body, html").animate({ scrollTop: top }, function () {
    if(!callbackFired){
        animateScroll($topItem);
        callbackFired=true;
    }
});

Answer 3

这对我有用。

$("body, html").animate({ scrollTop: top }).promise().done(function() {
                            animateScroll($topItem);
                        });