1

scrollTop プロパティをアニメーション化すると、レンダリングが不正確になりますか。jsbin http://jsbin.com/ewulum/2/editで作成したこのコードを親切に確認してください

私がやりたいのは、リンクをクリックすると、対応するセクションまで自動的にスクロールダウンすることです。しかし、対応するセクションまで適切にスクロールダウンしない理由について、コードの何が問題なのかわかりません。最初の 2 つのリンクをクリックすると、問題なく動作するようです。

前もって感謝します。

4

2 に答える 2

1

実際には動作しており、アニメーション jQuery scrollTop は正常に動作しています。cssに追加height:2000pxするだけです。body3番目、4番目、または5番目のリンクをクリックすると、下にスクロールし、セクション5の下にスペースがないため、スクロールが停止します。その下にスペースを追加するか、コンテナーに高さを追加すると、問題が解決するはずです。

于 2013-05-29T06:31:09.220 に答える
0

私にはすべてがうまくいくようです。特定の要素にスクロールするための最も関連性の高いコードは次のとおりです。

$('html, body').animate({ scrollTop: $('#box').offset().top }, 2000);

必要に応じてピクセルを追加して、完全に配置することができます。

$('html, body').animate({ scrollTop: $('#box').offset().top + 10 }, 2000);

私はあなたのhttp://jsbin.com/ewulum/2/editに入り、いくつかの変更を加えました:

.wrapper {
  width: 90%;
  margin: 0 auto;
  background:#ececec;
  overflow: auto;
  height: 250px;
}

JS ファイル

//event delegation
$("#nav-wrapper").on("click", "a", function(e){

  var cur_el_href = $(this).attr("href"),
      cur_el_top =$(cur_el_href).offset().top;

  e.preventDefault();

  console.log("The current elem's href value is " + cur_el_href);
  console.log("The target section's offset top is " + cur_el_top);

 $(".wrapper").animate({
     scrollTop:cur_el_top
   },
   800, function(){
     //this callback is for demonstration only so as not to back to top when testing other links
         $(this).animate({scrollTop:0}, 1000);
   });

});
于 2013-05-29T06:58:26.710 に答える