固定ヘッダー時のアンカーリンクずれ解消jsの件で

Question

固定ヘッダーを採用しますと、ページ内リンク、ページ外からのアンカーリンクにおきまして、
固定ヘッダーの高さ分だけ、アンカー貼った箇所がめり込んでしまうのですが、
いろいろ検索してみた結果、下記コードで解決するようでしたので、読み込ませました。

$(function () {
var headerHight = 80; //ヘッダの高さ
$('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;
  });
});

結果、chromeのデベロッパーツールではエラーをはいてないのですが、
うまくヘッダーの高さ分だけ下へずれてくれないです。

ちなみに別サイトでもおなじように固定ヘッダーを採用しているため、同様に対処したく、

jQuery( window ).on( 'load', function() {
  id    = location.hash;
  speed = 0;
  headerHight = 180; // 固定ヘッダーの高さ
  if ( '' != id ) {
    pos = jQuery( id ).offset().top - headerHight;
    jQuery( 'html' ).animate({ scrollTop: pos }, speed );
  }
});

を読み込ましてあるのですが、こちらは問題なくヘッダーの高さ分だけページ内リンク箇所、下へずれてくれております。
同じコードを今回読み込ましてうまくいきませんでしたので、新たに検索して別のコードを読み込ました次第です。

なにか問題ありますでしょうか？よろしくお願いいたします。

追記で、wordpressを使用しておりまして、theme固有のjs内に、

function d() { jQuery("#menu-overlay").addClass("panel-open") } jQuery('a[href^="#"]').not(".noscroll,.woocommerce-tabs .stars a,.woocommerce-tabs .wc-tabs a,.reset_variations,.woocommerce-product-gallery__trigger").click(function() { if (!jQuery(this).parents().hasClass("noscroll")) { var e = jQuery(this).attr("href"),
                t = jQuery("#" == e || "" == e ? "html" : e); if (t.offset()) { var i = t.offset().top - l;
                jQuery("html, body").animate({ scrollTop: i }, 500, "swing") } return !1 } }), e.click(function() { c() }), t.click(function() { c() }), i.click(function(e) { d() }), n.click(function() { d() }), 

という記述があります。
この箇所に干渉していて、動作しないという事はありますでしょうか？？
まったくエラーははいていないもので。

Comments

[Lhankor_Mhy]

期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2

[Lhankor_Mhy]

$("html, body").animate({scrollTop:position}, 550, "swing");←の後にある全角スペースが気になります。
実際のコードにもこれがあるなら、エラーになりそうな気がします。

[niccha]

重ね重ね、ご返信ありがとうございます。全角は入ってないので、そこは関係ないかと思います。

chromeのデベロッパーツールでエラーはまったく出ていないのですが、動作（固定ヘッダーの高さ分だけ下へずれるようにする）がしないんです。

[Lhankor_Mhy]

> 全角は入ってないので、そこは関係ない

質問文を訂正されることをお勧めします。

> 動作（固定ヘッダーの高さ分だけ下へずれるようにする）がしない

ブレークポイントやステップ実行した結果はどのような感じですか？

Answer 1

いろいろと回答者の方にご尽力いただいたのですが、当方のサイトの環境に起因しているようで、jsでは解決出来なかったので、CSSにて解決いたしました。

どうも、ありがとうございました。

Answer 2

こうではないでしょうか。

var position = target.offset().top + headerHight; // 符号が逆

追記

間違えました。こうですね。

$('a[href^="#"]') // クォーテーション漏れ

> こちらではうまくいかなかったです。

サンプル

このサンプルは、当方では動作しました。
FumioNakayamaさんの環境では動作しますか？

動作するのであれば、問題はご提示いただいた部分以外にあるのかもしれません。
動作しないのであれば、環境の問題でしょう。

Comments

[niccha]

はい、ありがとうございます。

書き換えしてみたのですが、変わらずです。

[Lhankor_Mhy]

そうでしたか。
当方では上手くいったので、あとでサンプルを作って挙げてみます。

[niccha]

ありがとうございます！

[niccha]

$('a[href^="#"]') // クォーテーション漏れ

こちらではうまくいかなかったです。

[Lhankor_Mhy]

サンプルを追記しました。

[niccha]

ありがとうございます。後ほどやってみます！
別サイトでは質問させていただいたコードで動作していたんですよね。そこが気がかりです

[niccha]

やはり改善しなかったです、当方の環境が影響してるのかと思われますね。
おそらく作成していただいたコードで普通であれば、動作するかと思われますので。
お手数おかけいたしまして、ありがとうございました。

[Lhankor_Mhy]

リンク先のサンプルも動作しなかったのですか？
そうすると、ブラウザの問題かもしれませんね。