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);
}

它突然工作正常！但是，我真的想使用animate函数。知道如何才能实现这一目标吗？谢谢！

Answer 1

尝试设置body和html元素的动画：

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

Answer 2

~~$(elem).animate为CSS属性设置动画，滚动位置不是一个。~~不是真的;如果给定的属性不是CSS属性，则jQuery将其视为元素属性。

无论如何，对于没有 dom元素的animate ，有一个非常着名的用法，而不是为你喜欢的任何值设置动画：

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。

使用jQuery的scrollTop＆amp;时出现ownerDocument错误动画功能

2 个答案: