jquery - window.location.hash を使用する場合、scrollTo オフセットを使用できません

Question

position: fixed;メインナビゲーションを含むヘッダーを持つ単一ページのサイトがあります。このプラグインを使用して、メイン ナビゲーションを介して各セクションにスムーズにスクロールします。ヘッダーが固定されているため、offsetwhich = ヘッダーの高さを設定する必要があります。この初期化を使用すると、すべてが正常に機能します。

$('.nav-main a').click(function(e) {
    e.preventDefault();
    var anchorLocation = $(this).attr('href');
    $.scrollTo(anchorLocation, 700, {
        offset: -86
    });
});

しかし、セクション ID を含めるには URLが必要hrefです<a href="#about">About</a>。

$('.nav-main a').click(function(e) {
    e.preventDefault();
    var anchorLocation = $(this).attr('href');
    $.scrollTo(anchorLocation, 700, {
        offset: -86,
        onAfter: function() {
             window.location.hash = anchorLocation;
        }
    });
});

そのため、URL は修正されますが、スムーズ スクロールが終了するとヘッダーが消えることがありますが、もう一度スクロールしてoffset機能しない場合は再び表示されます。何か案は？

編集

誰かが以下のソリューションを投稿しましたが、それを削除しましたが、プラグインを使用する必要がないという点で機能しますがoffset、スクロールアニメーションが停止すると、IE 8/9 および Firefox の Webkit ブラウザー (Chrome、Safari) でのみ機能します。offset約 1 ミリ秒の間、ビューポートの上部にスナップします。

var headerHeight = $('[role="banner"]').outerHeight() -1;

$('.nav-main a').click(function(e) {
    e.preventDefault();
    scrollToID($(this).attr('href'));
});

function scrollToID(ID){
    $('html, body').animate({
        scrollTop: $(ID).offset().top - headerHeight
    }, 700, function() {
        window.location.hash = ID;
    });
}