2

私は非常に奇妙なバグに出くわしました。私はjQueryscrollTopを使用して、.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).animateCSS プロパティをアニメーション化し、スクロール位置が 1 つではありません。違います; 指定されたプロパティが 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

于 2012-06-01T08:17:46.947 に答える