タブナビゲーションをクリックした時だけ、scrollIntoView を適用したい

WPにてサイト構築中です。
カスタム投稿で実績のページを作成し、カスタム分類も利用しています。
実績のカスタム投稿アーカイブページと各分類アーカイブページに横スクロール可能なタブナビゲーションを設置しています。

HTML
1<nav id="tab-nav" class="my-nav">
2    <div class="my-nav__mask">
3        <ul class="my-nav__list">
4            <li class="current"><a href="http://xxxx.jp/xxxx/">ALL</a></li>
5            <li><a href="http://xxxx.jp/xxxx/xxxx/">たぶ1</a></li>
6            <li><a href="http://xxxx.jp/xxxx/xxxx/">たぶ2</a></li>
7            <li><a href="http://xxxx.jp/xxxx/xxxx/">たぶ3</a></li>
8        </ul>
9    </div>
10</nav>

ページ遷移した時に、現在のページのタブを表示させる為、scrollIntoView で以下のように記述しました。

jQuery
1jQuery(function($){
2    $(window).load(function() {
3        var parentDOM = document.getElementById('tab-nav');
4        var element = parentDOM.getElementsByClassName('current')[0];
5        element.scrollIntoView(true);
6    });
7});

しかし、上記の記述ではグローバルナビをクリックした時も適用されてしまい、タブの位置に自動的に移動してしまうので、タブナビをクリックした時のみ scrollIntoView を適用したいです。
以下のように記述してみましたがうまくいきません…。
どのように記述すれば良いでしょうか？

jQuery
1jQuery(function($){
2    var parentDOM = document.getElementById('tab-nav');
3    var element = parentDOM.getElementsByClassName('current')[0];
4
5    $(document).on('click',function(e) {
6        if(!$(e.target).closest('.my-nav').length) {
7            // ターゲット要素の外側をクリックした時の操作
8
9        } else {
10            $(window).load(function() {
11            // ターゲット要素をクリックした時の操作
12            element.scrollIntoView(true);
13            });
14        }
15    });
16});