ナビゲーションへスクロールする最初の要素から作業しています

Question

私は初心者ですが、私はこの作業を行うために何を変更する必要があるのか​​よく分かりません。

これはlinkです。

私は折りたたみ可能な固定ナビゲーション付きのコンテナを持っています。それぞれのナビゲーション項目をクリックして、その章までスクロールすることができます。事は：これは上から出てくるか「第1章」だけです。 ナビゲーションの章を2回クリックすると、上下に移動してアンカーに移動するだけではありません。

これは私が固定されたナビゲーションなしでそれを設定していたとき、私が見つけたjavascriptのである - それは私が？：

function scrollNav() { 
    $('.nav a').click(function(){ 
    //Toggle Class 
    $(".active").removeClass("active"); 
    $(this).closest('li').addClass("active"); 
    var theClass = $(this).attr("class"); 
    $('.'+theClass).parent('li').addClass('active'); 
    //Animate 
    $('#container').stop().animate({ 
     scrollTop: $( $(this).attr('href')).offset().top - 180 
    }, 400); 
    return false; 
    }); 
    $('.scrollTop a').scrollTop(); 
} 
scrollNav(); 

おかげで多くのことを望むように動作するために変更するには何！

Answer 1

このアップデートはfiddleを参照してください。 jqueryライブラリとデバッグ用のコンソールを追加しました。

まず、ここで.position()代わりの.offset()使用：

は、私が発見二つの主要な問題がありました。オフセットは常にドキュメントとの相対的なものですが、位置はオフセットの親との相対的なものです（ドキュメントである場合とそうでない場合があります）。 this answerを参照してください。親コンテナとの相対的な位置に関心があるので、使用する必要があるのは .position().topです。

これが適切に設定されたら、scrollTopの正しい値が推測されやすくなります。ターゲット要素をスクロールすると、#containerに相対的な位置は負になります。 chapterPositionが-300であり、現在のscrollTopスプライトが1000であれば、我々は#container div要素が固定位置しているため、これがあること、しかし、700

ノートにスクロールします。上記のフィドルでは、スクロールヘッダーを使用したくない場合はスクロールを計算する別の方法を使用します& #containerを修正する必要はありませんでした。