【ウェブデザイン】スムーススクロール機能をjQuery依存からJavaScript型に変えてみた

ワードプレスサイトでとあるテーマに変えたとたん、スマホ上のグローバルメニュー（ハンバーガーメニュー）をタップしても全く開かなくなったんです。

原因はほどなくつかめたものの解決策が一向に見つからなかったところ、このたび解決策がわかったので備忘録として残しておきます。

原因はJjQuery依存型のスクリプト

切り替えたテーマには、スマホでのグローバルメニュー表示としてハンバーガーメニュー機能が実装されていました。

ところがそれまで使っていた機能をいろいろ移植していくうちに、いつのまにかハンバーガーメニューをタップしても一向に開かなくなる現象がおきたんです。

調べた結果、原因はそれまで普通に使っていた”スムーススクロール”機能にありました。

それまで使っていたスムーススクロール用のスクリプトがこちら↓。

上記はjQuery依存型のスクリプトなんですが、これを外すとハンバーガーメニュー機能が復活するんです。

でもそうなるとスムーススクロール機能が使えなくなる…。

個人的にはスムーススクロール機能はほぼ必須の機能として実装させたかったので、これが使えないとなるとちょいとイライラするんですよ。

ただ（スクリプト類に関しては素人なもんで）どうやっても解決策がわからず、ハンバーガーメニュー表示を優先させるかスムーススクロール機能を優先させるかでずっと悩んでおったのですよ。

一時的な対応策として、PC上のグローバルメニュー表示をそのままスマホ（モバイル）でも見やすいように独自カスタマイズしてなんとかしのいでいたこともあります。

そんなさなか、ようやく解決策が見つかったんです。

結果としてはjQuery依存ではなくではなくJavaScript単体のスクリプトに変えたらうまくいった次第です。

スクリプトの内容はよくわからんけど...

おそらくハンバーガーメニュー用のスクリプトとスムーススクロール用のスクリプトが何らかのコンフリクトを起こしてたんでしょう。

変更したJavaScriptのコードがこちら↓です。

上記のスクリプトに変えたところ、どちらも問題なく機能したのでとりあえず一件落着とします。