web-dev-qa-db-ja.com

jQueryアニメーションscrollTop

オーバーフローが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);
});
_

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

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

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

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

javascriptjqueryanimationscrolltop
15
ayyp

問題は、position()がどのように機能するかであり、scrollTopに関連するtop/heightを返します。

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

レディイベントで全高位置を取得できます。 （つまり、scrollTopは0）

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

$("section#skills").position().top + $("#viewport").scrollTop()
11
InuYaksa

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

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

   var aHref = $(this).attr("href");
   var top = $('section'+aHref+'').position().top;
   $('#viewport').animate({scrollTop: top}, 800);
});
8
ShankarSangoli