複数ページある場合、ページ内リンクをスムーススクロールで動かすには

Question

<nav>
 <ul>
  <li><a href="/">TOP</a></li>
  <li><a href="/#about">ABOUT</a></li>
  <li><a href="/menu/">MENU</a></li>
  <li><a href="/menu/#menu2">MENU2</a></li>
 </ul>
</nav>

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

<nav>はハンバーガーメニューで全ページに共通して設置しています。（cssは割愛させていただきます） jqueryはサイトに記載があったものを拝借しましたが、ページが複数あるとページ内リンクのスムーススクロールがうまくいきません。 「/#about」を「#about」に変えれば（スラッシュなし）動くのですが、そうするとMENUページにいたときにクリックしたら そのページ内の#aboutを探してしまうので動きません…。

今回のように、複数ページある場合でもページ内リンクをスムーススクロールでうまく動かすには
どのように修正をすれば宜しいでしょうか？

Answer 1

ページ遷移した際に#の部分までスクロールさせるには以下のコードを足してみてください。

$(function(){
    if (location.hash) {
        setTimeout(function(){
            $('html,body').animate({
                scrollTop: $(location.hash).offset().top
            }, 400, 'swing');
        }, 500);
    }
});

追記:
setTimeout()を追加しました。

Comments

[pppx]

ご回答、ありがとうございます！
記述を足したところ、以下の問題点が出てきました。
・たまに遷移先の位置が若干ずれる（サイトに遅延読み込みは使用していません）
・/menu/にいたときに/menu/#menu2を押すと、スムーススクロールにならない
一部はうまくいっているように思えるのですが、上記でまたもやつまずいてしまいました…。
何度も申し訳ございません、アドバイスをいただけると幸いです。

[cerfweb]

setTimeoutを追加しても変わらないでしょうか。
遷移先の位置がズレるというのはhtml/cssの情報がないためよくわかりません。