Javascript 调整DIV的大小会导致页面随机垂直滚动，固定为角度

我正在使用AngularUI的折叠，目前我正在尝试修复一些关于自动滚动的问题。为了简化我的案例，想象一下有两个div，一个在另一个之上

用户可以折叠第一个DIV，如果是这样，我希望焦点位于第二个DIV的顶部。为此，我使用jQuery的animate，但是在调用animate之后，DIV的焦点设置为某种随机位置

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.isCollapsed = null;

  $scope.doCollapse = function() {
    $scope.isCollapsed = true;

    var $target = $('.tallDiv');
    $("body,html").animate({scrollTop: $target.offset().top}, "fast");
  }
});

使用以下链接进行测试：

当然，一种解决方案是删除动画部分。只有当你在页面的顶部，如果你已经向下滚动了，那么焦点只会在第一个DIV折叠后被设置为第二个DIV的一个随机点

我想jQuery和Angular的交互不是很好，有没有一种方法可以完全在Angular中实现呢

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.isCollapsed = null;

  $scope.doCollapse = function() {
    $scope.isCollapsed = true;

    var $target = $('.tallDiv');
    var $topDiv = $('.containerResizeDiv');
    $("body,html").animate({scrollTop: $target.offset().top - $topDiv.height()}, "fast");
  }
});

至于现在，我按照quantum的建议解决了这个问题。在调用动画之前删除第一个DIV的高度。这个解决方案对我的案例来说效果不错，但没有100%，我发现了一些小问题

---

显然CSS中存在一个transitionend事件，可以监听该事件，以便在折叠结束后启动滚动动画。但是我没有时间去探究这个问题。

之所以会发生这种情况，是因为在动画开始折叠绿色div之前调用了

$target.offset（）.top

（因此它返回绿色div处于全高的偏移位置）。要解决此问题，请在动画完成后检查偏移值（或从偏移值中减去绿色div的高度）。谢谢您的回答。一个干净的解决方案是在动画之后这样做，但是我如何知道动画何时结束？据我所知，Angular的UI折叠在事件上没有动画。我将给出一个手动减去第一个div高度的镜头。尝试设置div高度的动画，而不是滚动，现在使用eventas可以在制作动画之前移除第一个div的大小。如果我有时间，我将尝试使用此transitionend事件。谢谢！