2

我偶然发现了一个非常奇怪的错误。我正在使用 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);
}

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

4

2 回答 2

3

尝试动画 body 和 html 元素：

  if (errorPos > windowPos) {
    $("body, html").animate({
      scrollTop: errorPos
    }, 1000);
  }
于 2012-06-01T08:13:36.910 回答
0

$(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通常不使用最终值调用。

于 2012-06-01T08:17:46.947 回答