Scroll on click : ajouter quelques pixels de décallage

Bonjour,
Je crée mon site portfolio, tout le contenu n'est que sur une seule page et est organisé en sections. Il y a dans le menu des liens vers les ID des sections.
Je voulais que lorsqu'un internaute clique sur un lien du menu, que le scroll soit délicat et pas d'un seul coup, et aussi que l'ID de la section ne s'ajoute pas dans l'URL.
Pour cela, j'ai trouvé un bout de code qui fonctionne à merveille :

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

Le problème, c'est que mon menu est en position fixed en haut de l'écran, le contenu passe donc derrière celui-ci.
Ce que je cherche à faire, c'est dire, dans le code ci-dessus : "scroll vers la section sur laquelle l'internaute a cliqué, mais 50 pixels au dessus".
Avez-vous une idée de comment je pourrais faire cela ? :)