アイキャッチ画像
HOME > ウェブデザイン > 【ウェブデザイン】スムーススクロール機能をjQuery依存からJavaScript型に変えてみた
記事公開日:2020.12.22
この記事は約2分で読めます。

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

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

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

スポンサーリンク

スポンサーリンク

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

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

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

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

スムーススクロール機能というのは、あるリンクをクリックすると同ページ内の別の場所までするするっとスクロールしながら移動する機能です。

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

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

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

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

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

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

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

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

スポンサーリンク

スポンサーリンク

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

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

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

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

【Volar】サイトイメージ画像

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)