15

sectionオーバーフローがに設定されたdivにかなりの数のタグがありますhidden。コードは次のようになっています。


<div id="viewport">
   <section>
      content
   </section>
   <section>
      content
   </section>
</div>

メニューで対応するリンクが押されたときに、にsections含まれているものをスクロールできるようにしたいので、このように設定しました。div私はこの機能を持っています：


$('#mn a').click(function(){
   var aHref = $(this).attr("href");
   var sectionHeight = $('section'+aHref+'').height();
   $('#viewport').height(sectionHeight);
});

サイズが異なる#viewportため、divのサイズを変更するために使用します。sectionsこのスクロール部分をその関数に入れようとすると、次のようになります。


$('body,html').animate({scrollTop: $(aHref).offset().top}, 800);

ページ全体がスクロールします。置き換えようとすると$('body,html')、$('section, #viewport')div内でスクロールしますが、正しく実行されません。

ここにこれの実例があります。.offset()私はそれがまたは私が渡したもののいずれかと関係があると思いますが.animate()、私はかなりの数の異なることを試みましたが、役に立ちませんでした。誰かが私を正しい方向に向けたり、私が間違ったことを教えてもらえますか？

4

3 に答える 3

11

問題は、どのようposition()に機能するかです。に関連するトップ/高さを返しますscrollTop。

したがって、クリック時にリクエストすると$('section'+aHref+'').position().top、返される位置はscrollTop値から変更されます。

レディイベントで全ての高さ位置を取得できます。（そうscrollTopです0）

または、次の方法で位置の値をサニタイズできます。

$("section#skills").position().top + $("#viewport").scrollTop()
于 2011-12-13T22:58:03.177 に答える
8

まず、ページをページの一番上までスクロールするために、アンカーのデフォルトの動作を防止する必要があります。これを行うには、イベント ハンドラーpreventDefault()内のイベント オブジェクトでメソッドを呼び出します。clickこれを試して

$('#mn a').click(function(e){
   e.preventDefault();

   var aHref = $(this).attr("href");
   var top = $('section'+aHref+'').position().top;
   $('#viewport').animate({scrollTop: top}, 800);
});
于 2011-12-13T22:41:08.613 に答える
-1

シンプルな jquery プラグインでこれを行いたい場合は、( AnimateScroll ) を試すことができます。これは、現在 30 以上のイージング スタイルもサポートしています。

于 2013-09-12T09:27:35.280 に答える