お問い合わせはコチラから

TOPに戻るボタンやアンカーリンクの挙動がおかしい時の意外な原因とは?

サイト運営

ある時からTOPに戻るボタンの挙動がおかしい現象に出くわすことが多くなりました。自分のサイトだけではなく、違うテーマのサイトでもある条件の時に起こる不思議な現象です。

ページの下まで勢いよくマウスでスクロールして、TOPに戻るボタンを押すと、一度TOPに戻った後に同じ場所に戻ってきてしまう。

ページの一番下から少し上に戻してから、TOPに戻るボタンを押すと期待通りTOPに戻って停止してくれます。

この原因がずっとわからなかったのですが、やっと原因がわかりました。おそらく殆どの人には関係ない原因なのですが、メモしておきたいと思います。

TOPに戻るボタンやアンカーリンクの挙動がおかしい原因

結論から申しますと、私のマウスのホイールが原因でした。

私が使用しているマウスは、Logitechのマウスでホイールがものすごい勢いで回ります。マウスのホイールは指を離した後もしばらく回転を続けます。

そのため、以下のようなシーケンスで不思議現象が起きます。

  1. 勢いよくホイールでスクロールさせ指を離します。
  2. ページの最下部まで到達するとページのスクロールは止まります。
  3. しかし、ホイールは下方向にスクロールするように回転したままです。
  4. TOPに戻るボタンを押して、TOPに戻ります。
  5. TOPに戻ってjavascriptが停止した時に、まだホイールの回転は継続しているので、下方向にスクロールを行います。
  6. その結果、TOPに戻った後に、逆方向にスクロールする変な挙動に見えます。

この現象は、ホイールでページ先頭に勢いよく戻った時に、ヘッダーメニューなどのアンカーリンクをクリックしたときにも逆向きに同じ現象が発生します。

TOPに戻るボタンやアンカーリンクの挙動がおかしい原因の回避方法

ホイールの回転が原因なので、ホイールの回転を止めてからTOPに戻るボタンを押せば、常に正常に動きます。

TOPに戻るボタンやアンカーリンクの挙動がおかしい原因に気が付いた経緯

スムーススクロールのJavascriptが競合しているのではないか?と思っていろいろ解析していました。

しかし、ネットで検索してもそれらしい情報は無く、テーマのデモサイトでも同じように不具合が起きるので、やはりテーマの問題なのか?とか、色々悩みました。

気が付いてみれば、なんと間抜けな原因か!という感じです。

これに気が付いたのは、不思議なスクロールの動きに慣性が働いていたからです。

もしや、マウスのホイールかも?と思って確認したらホイールが止まっていませんでした。

まとめ

おそらく、特殊なマウスを使っていないと出くわさない現象なので、こんな間抜けな悩みを持っている人は限られると思います。

私が使っているマウスは、ロジクール MX ANYWHERE 3です。

このマウスは、MagSpeed電磁気スクロールホイールを搭載し、生産性を大幅に向上しますが、思わぬトラブルも引き起こしますので、ご注意ください。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました