jQuery: Das Hinzufügen der scrollTop zusätzlichen Pixel

Question

ich den folgenden Code bin mit der Bewegung zu glätten, wenn der Benutzer auf einen Link, dass seine href beginnt mit einem „#“

$(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; 
     }); 
    }); 
}); 

klickt muss ich über 40px hinzufügen zum ScrollTop-Wert, so dass der Haltepunkt den Inhalt abdeckt. Ich änderte den Code zu diesem, aber es scheint nicht zu sein, es zu tun (die 40 in Richtung Ende des Codes feststellen):

$(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

Die +40 versetzt, die Sie wirklich wollen, um ein -40 nicht funktioniert, weil sobald die Animation der Browser beendet tut es Standardreaktion mit der id Sie vorbei an window.location.hash

Sie entweder die Zeile entfernen oder fügen Sie den folgenden CSS zu den Elementen wird gescrollt auf das Element gehen.

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

Siehe FIDDLE

Answer 2

Ich kenne eine späte Antwort, aber jemand eine Lösung sucht, kann dies versuchen.

Durch die Zugabe von .top + (-40) wird der Trick

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