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

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

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

html
1<header>
2 <ul>
3   <li><a href="#section1">section1</a></li>
4   <li><a href="#section2">section2</a></li>
5   <li><a href="#section3">section3</a></li>
6 </ul>
7</header>

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

HTML
1<header>
2 <ul>
3   <li><a href="index.html#section1">section1</a></li>
4   <li><a href="index.html#section2">section2</a></li>
5   <li><a href="index.html#section3">section3</a></li>
6 </ul>
7</header>

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

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

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

js
1$(function(){
2        $('a[href^=#]').click(function(){
3            var adjust = 0;
4            var speed = 400;
5            var href= $(this).attr("href");
6            var target = $(href == "#" || href == "" ? 'html' : href);
7            var position = target.offset().top + adjust;
8            $('body,html').animate({scrollTop:position}, speed, 'swing');
9            return false;
10        });
11    
12  });

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

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

x_x

2020/02/03 02:00

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

Bokoko33

2020/02/03 04:03

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

x_x

2020/02/03 04:20

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

Bokoko33

2020/02/03 04:26

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

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1    $(document).on('click', 'a[href*="#"]', function(event) {
2        var anchor = event.currentTarget;
3        if (anchor.target !== '' && anchor.target !== window.name) {
4            return true;
5        }
6
7        var documentUrl = location.origin + location.pathname + location.search;
8        var anchorUrl = anchor.protocol + '//' + anchor.host + anchor.pathname + anchor.search;
9        if (documentUrl !== anchorUrl) {
10            return true;
11        }
12
13        if (anchor.hash !== '') {
14            var adjust = 0;
15            var speed = 400;
16            var position = $(anchor.hash).offset().top + adjust;
17            $('body,html').animate({ scrollTop: position }, speed, 'swing');
18            event.preventDefault();
19            return false;
20        }
21    });