【対応事例】「WP Simple Booking Calendar」の月送りをするとスクロールしてしまう

株式会社まほろばの鈴木（@mahoroba148）です。

カレンダーを表示するWordPressのプラグイン「WP Simple Booking Calendar」

無料で使える且つ、操作画面もわかりやすいので営業日カレンダーなどを表示に役立ちます。

しかし、テーマによっては「次の月」「前の月」を押すとそのページの一番上へ勝手に移動してしまうことがあります。

実際にご相談がありましたので対応事例としてご紹介します。

※実際のコードの記載はありませんのでご了承ください

原因

特定の場所に自動スクロールするスムーススクロールが発火してしまうため、トップへ移動してしまいます。

だいたいのスムーススクロールは「#」がついたリンクを押したら、対象位置にスクロールしなさいね、というような指示になっています。

実は月送りのボタンもリンク先が「#」になっているのです。

デバックでみるとこんな感じ↓

テーマによってはこのスムーススクロールの指示が埋め込まれていることが多く、子テーマで上書きできない場合があります。

親テーマを直接編集することで一時的に解消できますが、アップデートの度に上書きされてしまい、完全に解決できたとはいえません。

※親テーマの編集自体もエラーの原因となるためおすすめしておりません

対応策

Javascriptで「WP Simple Booking Calendar」の次の月、前の月のリンク先を変更します。

詳しいコードはここでは載せられませんが、Javascriptに知見のある方ならばそこまで難しくないコードだと思います。

また、「WP Simple Booking Calendar」はパソコンとスマートフォンで表示が切り替わります。

2つのコードに対応できるようにしましょう。