使用 jQuery 的 scrollTop 和动画函数时的 ownerDocument 错误

Question

我偶然发现了一个非常奇怪的错误。我正在使用 jQuery scrollTop 让窗口滚动到 .extrasWarning 类的位置，只要该类不在窗口的视线范围内。这是以下代码：

$('[data-required] .number select').change(function () {
var number = $(this).closest('.choice_data').data('required'),
windowPos = $(window).height(),
selectedAmount = 0;
alert(windowPos);
$(this).closest('.choice_data').find('.number option:selected').each(function (i) {
  selectedAmount = selectedAmount + parseInt($(this).val());
});
if (selectedAmount > number) {
  $(this).closest('.choice_data').next('.extrasWarning').show();
  var errorPos = $(this).closest('.choice_data').next('.extrasWarning').offset().top;
  alert(errorPos);
  if (errorPos > windowPos) {
    $(window).animate({
      scrollTop: errorPos
    }, 1000);
  }
} else {
  $('.extrasWarning').hide();
}
});

当我使用元素选择另一个选项时，所有事件都会正常触发，除了 $(window).animate 函数。 FireFox 显示以下错误：a.ownerDocument 未定义。

问题在于将 animate 函数与 scrollTop 函数结合使用。如果我实施以下更改：

if (errorPos > windowPos) {
  $(window).scrollTop(errorPos);
}

它突然工作正常！但是，我真的很想使用动画功能。知道我怎样才能做到这一点吗？谢谢！

Answer 1

尝试动画 body 和 html 元素：

  if (errorPos > windowPos) {
    $("body, html").animate({
      scrollTop: errorPos
    }, 1000);
  }

Answer 2

$(elem).animate 动画 CSS 属性，并且滚动位置不是一个。 不正确；如果给定的属性不是 CSS 属性，jQuery 会将其视为元素属性。

无论如何，animate 没有 dom 元素有一个不太为人所知的用途，而是为你喜欢的任何值设置动画：

var jWin = $(window);
var currentPos = jWin.scrollPos();
$({pos: currentPos}).animate(
    {pos: errorPos},
    {
        duration: 1000,
        step: function () { jWin.scrollTop(this.pos) },
        complete: function () { jWin.scrollTop(errorPos); }
    }
);

这会将pos 从当前滚动位置动画到预期目标errorPos。在step 函数中，您可以相应地设置实际滚动位置。

complete 步骤是必要的，因为 step 通常不会使用最终值调用。