Barba.jsとjQueryのスムーズスクロールが併用できません。

Question

Barba.jsを使ったwebページを作成中なのですが、jQueryを用いたヘッダーメニューからのスムーズスクロールが上手く機能しません。

ヘッダーメニューは本来、

<header>
 <ul>
   <li><a href="#section1">section1</a></li>
   <li><a href="#section2">section2</a></li>
   <li><a href="#section3">section3</a></li>
 </ul>
</header>

のように記述したいのですが、
Barba.jsによる遷移でヘッダー以外のコンテナを差し替えた場合、ヘッダーはそのままなのでヘッダーメニューから前のHTMLに戻ることができなくなってしまいます。よって現在、ヘッダーメニューを

<header>
 <ul>
   <li><a href="index.html#section1">section1</a></li>
   <li><a href="index.html#section2">section2</a></li>
   <li><a href="index.html#section3">section3</a></li>
 </ul>
</header>

のように書いてそれを解決しています。
ただ、これだとスムーズスクロールが機能しなくなってしまいます。

上手く二つを共存させたいのですが、方法が見つかりません。
解決方法があれば教えていただきたいです。

ちなみにjQueryでのスムーズスクロールは以下のように記述しています。

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

長く拙い文章になってしまいましたが、よろしくお願いします。

2019/02/03　追記
ページの構成ですが、トップページに3つのセクションがあり、ヘッダーメニューをクリックして任意のセクションにページ内移動（この部分にスムーススクロールを使いたい）、
セクション内の画像をクリックで別ページに移動（この部分がPjax遷移）という構成になっています。

Comments

[x_x]

実際に遷移したあとのことですか？
Pjax で書き換える前にスムーズスクロールしたいということですか？
両方なのでしょうか？
https://teratail.com/questions/98715

[Bokoko33]

コメントありがとうございます。ページ構成について追記いたしました。
スムーススクロールしたいのはトップページ内のセクション移動のみで、セクション内の画像をクリックするとPjaxで遷移するという想定です。

[x_x]

「ヘッダーはそのまま」であるため、Pjax 後にクリックしたときの遷移ではスムーズスクロールしなくてもよいということでいいでしょうか？

[Bokoko33]

そうですね、「遷移してスムーススクロール」がしたいわけではないです！
わかりにくくてすみません、、

Answer 1

    $(document).on('click', 'a[href*="#"]', function(event) {
        var anchor = event.currentTarget;
        if (anchor.target !== '' && anchor.target !== window.name) {
            return true;
        }

        var documentUrl = location.origin + location.pathname + location.search;
        var anchorUrl = anchor.protocol + '//' + anchor.host + anchor.pathname + anchor.search;
        if (documentUrl !== anchorUrl) {
            return true;
        }

        if (anchor.hash !== '') {
            var adjust = 0;
            var speed = 400;
            var position = $(anchor.hash).offset().top + adjust;
            $('body,html').animate({ scrollTop: position }, speed, 'swing');
            event.preventDefault();
            return false;
        }
    });

関連: https://teratail.com/questions/232115

Comments

[Bokoko33]

回答ありがとうございます。
まさにやりたいことを実装していただいて感動いたしました。本当にありがとうございます。
ただ、最初に飛んだセクションにそれ以降飛べなくなるようです。
かなりヒントをいただいたのでそちらは自力で解決に挑みたいと思います。
本当にありがとうございました。