jQuery 同じページ内のリンクにスクロールで移動する

Question

お世話になっております。

メインメニューはスクロールしても見える位置にするために固定してあります。
「jQueryでスムーススクロールを実装する方法」を参考に作成しました。
スムーズに動くのですが、止まった位置が固定しているメインメニューの下に被ってしまいます。
固定メニューの高さは50pxなので、50pxほど下に下げたいのですが、どうしたら良いのでしょうか？
ご教鞭をお願い致します。

$('a[href^="#"]').click(function() {
  // スクロールの速度
  var speed = 400; // ミリ秒で記述
  var href = $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $('body,html').animate({
    scrollTop: position
  }, speed, 'swing');
  return false;
});

参考サイト
https://techacademy.jp/magazine/9532

Answer 1

メニューのかぶっている位置から下に+50pxで止めたいなら（リンク位置より50px分下で止まる）

var position = target.offset().top + 50;

メニューのかぶっている位置から上に-50pxで止めたいなら（リンク位置より50px分上で止まる）

var position = target.offset().top - 50;

内部リンクを見出しにつけているなら見出しも表示させたいと思うので
その場合は下を使ってください。

固定メニューの高さは50pxなので、50pxほど下に下げたいのですが、

コンテンツ側を50px下げたいのか、メニュー側を50px下げたいのかわからなかったので
両方書きました。

Comments

[kmyr]

早速の回答をありがとうございます。
「-50」でうまくいけました。

Answer 2

var position = target.offset().top;
を下記に修正
var position = target.offset().top + 50;