[HTML, Jquery] 内部リンクのスムーススクロールの実装について

Question

前提・実現したいこと

内部リンクの設定で、

例：https://teratail.com/blog

にいる時に、

例：https://teratail.com/

上記の例のトップページの#abotutや、#storesにスムースで渡して、

例：https://teratail.com/#about

にしたいのですが、例：https://teratail.com/blog/#about

になるのでこれはどう設定すればいいでしょうか？

どこに不備があるかが分からないのでご教授お願いいたします。

該当のソースコード

<header>
<ul class="next_header_ul">
  <li><a href="#about"><span>ABOUT</span></a></li>
  <li><a href="../blog"><span>NEWS</span></a></li>
  <li><a href="#stores"><span>STORES</span></a></li>
</ul>
</header>
<script type="text/javascript">
$(function() {
  $('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;
  });
});
</script>

Answer 1

../は上階層へのリンクになるのでそもそも別ページに移動するのでは。

Comments

[kaoru_tujimiya]

ありがとうございます。自分に不備がありました。
編集したので、そちらの場合どうすればいいでしょうか？

[kei344]

書き換えたことで不備が広がっています。上層へのリンクで（移動した上で）スムーススクロールしたいという内容なのに、リンクがページ内リンクに変わっていますよ。