jQueryの：scrollTopスプライト

Question

私は、ユーザーが「＃」

$(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 
     var target = this.hash, 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top 
     }, 900, 'swing', function() { 
      window.location.hash = target; 
     }); 
    }); 
}); 

私は40ピクセルについて追加する必要があるとそのhref始まるそのリンクをクリックしたときの動きを滑らかにするために、次のコードを使用してい

に追加ピクセルを追加しますscrollTop値に設定すると、停止点がコンテンツをカバーします。 （コードの終わりに向かって40に気づく）私はこれにコードを変更し、それはそれをやっているようには見えません。

$(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 
     var target = this.hash, 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top + 40 
     }, 900, 'swing', function() { 
      window.location.hash = target; 
     }); 
    }); 
}); 

Answer 1

あなたが実際-40になりたいオフセット+40があるため機能していませんアニメーションが完了したら、ブラウザにはidの要素に行くデフォルトの反応が返されます。window.location.hash

スクロールする要素にその行を削除するか、次のCSSを追加することができます。

padding-top: 40px; 
margin-top: -40px; 

私は後半の答えを知っているが、解決策を求めている誰かがこれを試すことができFIDDLE

Answer 2

を参照してください。 .top +（-40）を行いますトリック

$('html, body').stop().animate({ 
    'scrollTop': $target.offset().top + (-40) 
}, 900, 'swing', function() { 
    window.location.hash = target; 
});