jQueryのタブをクリックすると上部にスクロールされる問題を解決する

WordPressでサイトを制作し、jQueryで簡単に作れるタブを実装した際、タブをクリックする度に、スムーススクロールと競合してしまい、上部にスクロールされて困ったことがあります。

その時の解決に至った経緯をまとめます。

INDEX.
・jQueryで簡単にタブをつくる
・スムーススクロールとの競合
・<span>タグのクリックイベントとしてタブを切り替え

- jQueryで簡単にタブをつくる

jQuery UIでCSSも用意されているので、とっても簡単にタブを実装できます。
<head>でjQuery , jQuery UI , jQuery UI のCSSを読み込み、$( "#tabs" ).tabs();　で「 id=tabs 」の部分をタブ化します。

↓こちらがjQuery UIのサイトです。
https://jqueryui.com/tabs/

タブ以外にも、メニューやボタン、基本的な動きも揃っているのでjQuery UIを元にCSSをカスタマイズもできます。

そして、「ページ内リンク」や「TOPへ戻る」をクリックしたときに、スルスルーっと動くスムーススクロールは必ず実装したいところです。

WordPressのプラグインもありますが、jQueryで簡単に実装できます。

▼参考：jQueryでスムーススクロールを実装する方法【初心者向け】
https://techacademy.jp/magazine/9532#sec2

ところが。

そう、上記のスムーススクロールのJavaScriptだと、<a> タグをクリックすると、スムーススクロールが発火してしまい、その場所までスクロールしてくれるのです。
ただタブを表示したいだけなのにー！

なので、タブをクリックする度に、変な動きが発生してしまう。
困りました。
絶対変だもの。

それ以外も、モーダルウィンドウを立ち上げる等、<a>タグを用いたクリックイベントは意外と多いですよね。

そんな時に見つけたのが、こちら！

▼タブをクリックすると上部にスクロールされてしまう
https://teratail.com/questions/65045

まさに同じような状況で悩んでいた方が。
なるほど！click();の前に、notを入れて、スムーススクロールを除外できるわけですね。
これでも解決できそう！！

ですが、今回は諸事情あって、<span>タグのクリックイベントとしてタブを切り替える方法に舵を切りました。

CSSを整える必要がありますが、<span>タグでもちゃんと動いていますね！

いつか誰かのお役に立てれば幸いです。
それでは。