アンカーリンクがリバウンドしてしまう

Question

###前提・実現したいこと
アンカーリンクがページ内にいくつかあり、カテゴリや質問ばらばらにつけています。
fixedしているheaderがあるので、クリックした際のずれを防ごうとしたのですが、
その高さ以上を指定しているので、クリックした際に上下にリバウンドが発生してしまいます。
これを防ぐにはどうしたらいいのでしょうか。
ちなみにheaderの高さは55pxです。
ご教示お願いします。

###発生している問題・エラーメッセージ
クリックした際のリバウンドをなくしたい

###該当のソースコード

   $('a[href^=#]').click(function() {
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top - 120;
      $('body,html').animate({scrollTop:position}, 400);
      return false;
    });

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「リバウンド」とは具体的にどのような挙動でしょうか。

[a1291]

申し訳ありません。修正しました。アンカーリンクをクリックすると、指定した120px分の高さまでは、ずれが解消されるのですが、2,30pxほど上下に振動してしまいます。

[kei344]

「上下に振動」についてはどのブラウザで確認しても起こりますか？ また、こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。

[a1291]

何度も申し訳ありません。修正しましたが、ご確認いただけますでしょうか？普段クロームを使用していますが、firefoxでも同じ現象がおこります。

Answer 1

動くサンプル：https://jsfiddle.net/jr44mjsL/, https://jsfiddle.net/jr44mjsL/show/

「上下に振動」について、Windows Chrome/Firefoxでは再現しませんでした。
他のスクリプトがスクロール時に動いていたりしませんか？

Comments

[a1291]

以前もすぐ答えてくださったのに、対応できず申し訳ありませんでした。
ありがとうございます！