Prise en compte d'un en-tête fixe avec animate.scrolltop et (target) .offset (). Top;

ÉDITÉ:
Vous avez juste besoin de détecter la hauteur de l'en-tête fixe et la déduire de la scrollToPosition qui vous ont été fait correctement. La question est la window.location.hash = "" + target; sauts de page au dessus de l'élément avec l'id. Donc, si vous animez il y a comme vous le faisiez et puis changer pour la que de hachage, il va "rebondir" comme vous l'avez décrit. Voici la première façon dont nous pouvons lutter contre cela:

//Get the height of the header
var headerHeight = $("div#header").height();

//Attach the click event
$('a[href*=#]').bind("click", function(e) {
    e.preventDefault();

    var target = $(this).attr("href"); //Get the target
    var scrollToPosition = $(target).offset().top - headerHeight;

    $('html').animate({ 'scrollTop': scrollToPosition }, 600, function(){
        window.location.hash = "" + target;
        //This hash change will jump the page to the top of the div with the same id
        //so we need to force the page to back to the end of the animation
        $('html').animate({ 'scrollTop': scrollToPosition }, 0);
    });

    $('body').append("called");
});

Voici un nouveau jsfiddle pour cette première méthode: http://jsfiddle.net/yjcRv/1/

PLUS EDIT:
Une bien meilleure façon de contrôle de hachage événements de changement est d'utiliser un plugin comme jQuery Adresse. Avec cela, vous pouvez utiliser votre hashchange événements beaucoup plus. Voici un exemple d'utilisation:

//Get the height of the header
var headerHeight = $("div#header").height();

$.address.change(function(evt){
    var target = "#" + evt["pathNames"][0]; //Get the target from the event data

    //If there's been some content requested go to it…else go to the top
    if(evt["pathNames"][0]){
        var scrollToPosition = $(target).offset().top - headerHeight;
        $('html').animate({ 'scrollTop': scrollToPosition }, 600);
    }else{
        $('html').animate({ 'scrollTop': '0' }, 600);
    }

    return false;
});

//Attach the click event
$('a').bind("click", function(e) {
    //Change the location
    $.address.value($(this).attr("href"));

    return false;
});

Live exemple ici: http://www.vdotgood.com/stack/user3444.html

REMARQUE: Vous n'avez pas besoin d'ajouter de la valeur de hachage pour vos liens attribut href maintenant. Voici un lien qui pourrait vous cible avec un sélecteur jQuery:

<!-- This is correct -->
<a href="/target" class="myclass">Target</a>

<!-- These are incorrect -->
<a href="/#/target" class="myclass">Target</a>

<a href="#/target" class="myclass">Target</a>

De cible de ce lien, il vous suffit d'utiliser un sélecteur comme:

$("a.myclass").click(function(){
    $.address.value($(this).attr("href"));
    return false;
});

jQuery Adresse, dans les faits, rechercher les liens qui ont l'attribut suivant:

<a href="/target" rel="address:/target">Target</a>

La rel attribut contient address: suivie par une url relative définie par vous dans ce cas /target. Si vous utilisez cette, jQuery Adresse de détecter le lien et le feu la table de hachage événement de changement automatiquement.

J'ai modifié le script d'origine http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery. Il fonctionne des merveilles, mais vous ne pouvez pas définir un retard tel qu'il est.

var headerHeight = $("header").height();


        $(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 - headerHeight
        }, 1200, 'swing', function () {
            window.location.hash = target ;
        });
    });
});

Oui, je suis un peu en retard, mais ce problème vient de se passer pour moi...
Cheers!