Question

I’ve stumbled across a very strange bug. I’m using jQuery scrollTop to let the window scroll to the position of the .extrasWarning class whenever that class is out the window’s sight. This is the following code:

$('[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();
}
});

When I use the element to choose another option, all the events fire properly, except the $(window).animate function. FireFox displays the following error: a.ownerDocument is undefined.

The problem lies with using the animate function in combination with the scrollTop function. If I implement the following change:

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

it suddenly works fine! However, I really want to use the animate function. Any idea how I can make this happen? Thanks!

Answer 1

try animating body and html elements:

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