ページ内のリンク先セクションへスクロールする際、セクションの少し手前でスクロールを止めたい

Question

下記smooth scrollingのjQueryでhtml上のaタグのリンク先セクション（同一ページ内）にクリックした時にスクロールするようにしたのですが、下記のままだとセクションの見出しと上部に固定しているナビゲーションバーがかぶってしまいました。
下記コードのどこかにoffsetを指定して、リンク先セクションにスクロールする際にナビゲーションバー分(50px)手前でスクロールを止めたかったのですが、うまくいきませんでした。
どのようにすればセクションの手前指定ができるのでしょうか？

$('a[href*="#"]')
    // Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function (event) {
      // On-page links
      if (
        location.pathname.replace(/^//, "") ==
          this.pathname.replace(/^//, "") &&
        location.hostname == this.hostname
      ) {
        // Figure out element to scroll to
        var target = $(this.hash);
        target = target.length
          ? target
          : $("[name=" + this.hash.slice(1) + "]");
        // Does a scroll target exist?
        if (target.length) {
          // Only prevent default if animation is actually gonna happen
          event.preventDefault();
          $("html, body").animate(
            {
              scrollTop: target.offset().top,
            },
            1000,

            function () {
              // Callback after animation
              // Must change focus!
              var $target = $(target);
              $target.focus();
              if ($target.is(":focus")) {
                // Checking if the target was focused
                return false;
              } else {
                $target.attr("tabindex", "-1"); // Adding tabindex for elements not focusable
                $target.focus(); // Set focus again
              }
            }
          );
        }
      }
    });

Answer 1

HTMLが提示されてないので仮のクラス名を使ってます。

全ソース公開を受けてソースコードを差し替えました

jQueryプラグインSTICKY NAVIGATIONを使っているんですね。

プラグインを使用している場合はそのことを明記し、プラグインの公式へのリンクも記述してください。またスクリプトの一部だけではなく、全文を公開してください。おかげでプラグインあるのかー。ちゃんと問題ないかプラグインに影響を与えていないかテストしてて回答が遅れました

$(function () {
    /*FOR STICKY NAVIGATION*/
    var offsetY;
    if (!$("nav").hasClass("sticky")) {
        offsetY = $("nav").addClass("sticky").outerHeight();
        $("nav").removeClass("sticky");
    } else {
        offsetY = $("nav").outerHeight();
    }

    $(".js--section-features").waypoint(
      function (direction) {
          if (direction == "down") {
          $("nav").addClass("sticky");
        } else {
          $("nav").removeClass("sticky");
        }
      },
      {
        offset: offsetY,
      }
    );
    $(".js--scroll-to-plans").click(function () {
      $("html,body").animate(
        {
          scrollTop: $(".js--section-plans").offset().top - offsetY,
        },
        1000
      );
    });
  
    $(".js--scroll-to-start").click(function () {
      $("html,body").animate(
          {
          scrollTop: $(".js--section-features").offset().top - offsetY,
        },
        1000
      );
    });
  
    $('a[href*="#"]')
      // Remove links that don't actually link to anything
      .not('[href="#"]')
      .not('[href="#0"]')
      .click(function (event) {
        // On-page links
        if (
          location.pathname.replace(/^//, "") ==
            this.pathname.replace(/^//, "") &&
          location.hostname == this.hostname
        ) {
          // Figure out element to scroll to
          var target = $(this.hash); //ここでjQueryオブジェクトに変換済み
          target = target.length
            ? target
            : $("[name=" + this.hash.slice(1) + "]");
          // Does a scroll target exist?
          if (target.length) {
            // Only prevent default if animation is actually gonna happen
            //event.preventDefault();
            
            $("html,body").animate(
              {
                scrollTop: target.offset().top - offsetY,
              },
              1000,
              function () {
                // Callback after animation
                // Must change focus!
                var oldScroll = $(window).scrollTop(); 
                $(window).one('scroll', function() { //focus()の直前に一度だけ機能するscrollのイベントリスナを設定
                  $(window).scrollTop(oldScroll); //focus()によるスクロールを一度だけ上書きして無効化する。
                }); 

                target.focus(); //targetは既にjQueryオブジェクトになっているから変換は不要
                if (target.is(":focus")) {
                  // Checking if the target was focused
                  return false;
                } else {
                  target.attr("tabindex", "-1"); // Adding tabindex for elements not focusable
                  var oldScroll = $(window).scrollTop(); 
                  $(window).one('scroll', function() { //focus()の直前に一度だけ機能するscrollのイベントリスナを設定
                      $(window).scrollTop(oldScroll); //focus()によるスクロールを一度だけ上書きして無効化する。 
                  }); 
                  target.focus(); // Set focus again
                }
              }
            );
          }
        }
     });
  
    $(".js--wp-1").waypoint(
      function (direction) {
        $(".js--wp-1").addClass("animated animate__fadeIn");
      },
      {
        offset: "50%",
      }
    );
  
    $(".js--wp-2").waypoint(
      function (direction) {
        $(".js--wp-2").addClass("animated animate__fadeInUp");
      },
      {
        offset: "50%",
      }
    );
  
    $(".js--wp-3").waypoint(
      function (direction) {
        $(".js--wp-3").addClass("animated animate__fadeIn");
      },
      {
        offset: "50%",
      }
    );
  
    $(".js--wp-4").waypoint(
      function (direction) {
        $(".js--wp-4").addClass("animated animate__pulse");
      },
      {
        offset: "50%",
      }
    );
  
    $(".js--nav-icon").click(function () {
      var nav = $(".js--main-nav");
      var icon = $(".js--nav-icon i");
  
      nav.slideToggle(200);
  
      if (icon.hasClass("ion-navicon-round")) {
        icon.addClass("ion-close-round");
        icon.removeClass("ion-navicon-round");
      } else {
        icon.addClass("ion-navicon-round");
        icon.removeClass("ion-close-round");
      }
    });
  });

  // フォーカス系のイベントでのスクロール処理をキャンセルする。
  //
  // firefox以外のブラウザは要素がフォーカスされた場合、フォームのテキストエリアなど入力がスムーズに
  // 出来るように、その要素をスクロールさせる。（正常な動き）その後その要素に対してselectが
  // 発生します。
  // firefoxはバグっててスクロールせずにフォーカスだけがあたる。
  //
  // コード内で要素.focus()する場合は、この解決策でも回避できない場合があります
  // これでもたまにスクロールすることがあり、もう一度クリックすれば直ります。
  // ブラウザ側の実装の問題なのでこれ以上は対処できません。
  //
  // 問題が無ければ、要素.focus()ではなく、要素.select()を検討してみて下さい
  // そうすれば、スクロールの問題は解決するはずです。
  $('section').bind('focusin focus', function(event){ 
    event.preventDefault(); 
  });

firefoxのみ正しく動いて見えたのはfirefoxにバグがあってスクロールしなかったからで
firefox以外のブラウザの動作が正常動作です。
動作確認してみたところ、IEはバグっててダメでした、edge(WEBから落としてきた最新版のedge),chrome,firefoxでは一応問題ありませんでしたが、chromeでまれにスクロールする事がありましたが再度クリックで直ります。
その他についてはソースにコメントを入れてあるので参照してください。

はぁ、プラグインもテストしてて予想外に疲れた･･･

追記：更なる改良でほぼfocus()のスクロールをIE以外で無効化できましたので、再再度ソースを差し替えました

focus()の直前に以下のコードを入れておくと最後に追加しているイベントハンドラと合わせて
ほぼ無効化できました。
focus()の直前に以下のコードを入れ込む

var oldScroll = $(window).scrollTop(); 
$(window).one('scroll', function() { //focus()の直前に一度だけ機能するscrollのイベントリスナを設定
    $(window).scrollTop(oldScroll); //focus()によるスクロールを一度だけ上書きして無効化する。
}); 

このコードと、最後に追加した'focusin focus'イベントリスナの２重のガードで、IE以外は完全に動作が正常化されました。

Comments

[thayamizu]

ディバイスによって高さが違う時の高さ取得方法まで教えて頂きありがとうございます。
この方法で一瞬だけナビゲーションバー高さ分手前でスクロールが止まるのですが、次の瞬間、リンク先のトップに移動してしまい、結局ナビゲーションバーがリンク先セクションの見出しとかぶってしまいました。
event.preventDefault();をありにしても基本的には同じでしたが、これをありにした場合は、もう一度ナビゲーションバーの同じリンクをクリックすると、指定したoffsetY分だけ手前にスクロールで戻って止まりました。
最初にクリックした時から指定したoffsetY分だけ手前でスクロールが止まって欲しいのですが、解決策はありますでしょうか？

[nekora]

質問は編集、追記できます。HTMLとCSSも提示いただかないと、これ以上回答できません。HTML、CSSも開示ください。
そうすれば、調査して答えを出せると思います。

[thayamizu]

ご指摘ありがとうございます。
下記のURLなのですがfirefoxで開いた時だけアドバイスいただいた方法（event.preventDefault();ありでもなしでも）で綺麗に表示されました。
IE/Chrome/Microsoft Edge/safariではうまくいっていないように思います。（一瞬手前で止まるがすぐに下に下がる）
event.preventDefault();を無しにすると２回目にナビゲーションリンクをクリックした時はちゃんと手前で止まるブラウザもありました。（すみません。09:45に返信した内容と逆でした。）

https://omnifood.work/
※section内の見出しはpaddingで調整してあるので、offset指定無しでもナビゲーションバーと被らなくなっていますが、ナビゲーションバーをsection手前で止めたいのは変わりありません。
ソースがたくさんあり、質問の方でどのように開示したらよいか分からなかったのでURLで開示させて頂きました。

[nekora]

スクロール対処版のソースコードに差し替えました。チェックしてみてください。
なぜこうなるのか、何が問題なのかなど、回答とソースコードに記載しました。

[nekora]

ソースコードの更なる改良でIE以外はほぼ正常に動作するようになりました。
このコードで動作確認してみてください。

[thayamizu]

ありがとうございます！
確認してみたところ、やりたかったことが実現できました！
プラグインがあると影響を与えることも知らずにお手数おかけしてすみませんでした。
firefoxが正常に見えていたのはfirefoxのバグだとは思ってもおりませんでした。丁寧に教えて頂き本当にありがとうございます。勉強になりました！

[nekora]

ただこれだけやっても100％じゃないんですよ＞＜
リンクを連打されるとoneのイベントリスナのつけ外しが間に合わなくて
スクロールすることがあります。
が、特殊なケースだとおもうので、ほぼこれでいいと思います。