jQueryアニメーションスクロールトップ

Question

sectionタグは、divにオーバーフローがhiddenに設定されています。コードは、この線に沿っている：

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

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

sectionsのサイズが異なるので、私は #viewportのdivのサイズを変更するために使用

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

。このスクロール部分をその関数に入れようとすると、次のようになります。

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

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

このライブの例はhereです。私はそれが.offset()か、私が.animate()に渡しているものと関係があると思っていますが、私は非常に異なるいくつかのことを試しましたが、役に立たないものです。誰かが正しい方向に私を向けるか、私が間違ったことを教えてもらえますか？

Answer 1

を試してみてください。

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

準備完了イベントですべての高さ位置を取得できます。

（そうscrollTopは0である）または、あなたが位置の値をサニタイズすることができます：あなたがこれを行うには、単純なjQueryプラグインを望むなら、あなたは現在、30の以上の緩和スタイルをサポートしている（AnimateScroll）しようとすることができ

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

Answer 2

まず、ページをページの上部にスクロールするには、アンカーのデフォルト動作を禁止する必要があります。これは、イベントハンドラー内のイベントオブジェクトに対してpreventDefault()メソッドを呼び出すことで実行できます。問題はposition()作品は、それがscrollTopに関連するトップ/高さを返す方法である。この

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

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

Answer 3

too