スティッキーメニューでのスムーズなスクロール

Question

これは私の問題です。これはstickymenu（＃メインメニュー）を持つ1ページのウェブサイトです。 ＃メインメニューはその位置に固定されています。最初の画像は、メニューの[About]リンクをクリックしたときにページがどのように表示されるべきかを示しています。ページは#about上を円滑にスクロールします。

しかし、ここでは画像二に、私は「について」のリンク、トップまで会社概要タイトルのスクロールをクリックして、＃メインメニューに隠したとき、私のサイトは、レンダリングされているものんです。ここで

私のJSコードです：

$('a').click(function(e) { 
     var target = $(this).attr('href'); 
     e.preventDefault(); 

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

は、どのように私はそれが唯一の＃メインメニューの一番下まで停止するのですか？百万円を事前におねがいします！

Answer 1

offsetTopからヘッダーの高さを引きます。

$('html').animate({ // $(document.documentElement) works too 
    scrollTop: Math.max($(target).offset().top - $('#your-header').outerHeight(), 0) 
}, 800, 'easeInOutCirc'); 

リンク先が一番上にあるときに負のオフセットにスクロールしないようにMath.max（...、0）を追加します。