ヘッダー固定しているサイトのアンカーリンクの位置ずれ対策が効かない

 
ヘッダー固定しているサイトのアンカーリンクの位置がずれるので下記ブログをを参考に対応しました。
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい

JavaScript

JavaScriptは下記の通りブログ記載内容をそのままコピペしました。

$(function () {
 var headerHight = 100; //ヘッダの高さ
 $('a[href^=#]').click(function(){
     var href= $(this).attr("href");
       var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
     $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
   });
});

リンク位置のずれは解消されたのですが、スムーズにスクロールされません。
コンソールを見てみると

Syntax error, unrecognized expression

というメッセージがでていました。

下記ページを参考にしてダブルクォーテーションを追加したら解決できました。
「Syntax error, unrecognized expression」というエラーが出たら確認すること

$(function () {
 var headerHight = 100; //ヘッダの高さ
 $('a[href^="#"]').click(function(){  //ここのダブルクォーテーション追加
     var href= $(this).attr("href");
       var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
     $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
   });
});

よかった。
jQueryのバージョンが古いと動いたりするんですが、新しいの使いたいですし、他の挙動にも影響がでてしまうので対応しておいた方がよさそうです。