BLOG 2018.07.03

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>タグを用いたクリックイベントは意外と多いですよね。


- <span>タグのクリックイベントとしてタブを切り替え

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

 

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

 

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

 

 

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

 

 

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

 

>> サンプル

 

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

CONTACT US !

デザインやWEBサイトのことでお困りごとはありませんか?
株式会社スリーでは、デザインはもちろん戦略からクリエイティブ、コミュニケーションまで、
デジタルとアナログ両分野の手法を使い分け、事業成長と問題解決をトータルサポートします。
お気軽にご相談ください!

お問い合わせはこちら