ある時からTOPに戻るボタンの挙動がおかしい現象に出くわすことが多くなりました。自分のサイトだけではなく、違うテーマのサイトでもある条件の時に起こる不思議な現象です。
ページの下まで勢いよくマウスでスクロールして、TOPに戻るボタンを押すと、一度TOPに戻った後に同じ場所に戻ってきてしまう。
ページの一番下から少し上に戻してから、TOPに戻るボタンを押すと期待通りTOPに戻って停止してくれます。
この原因がずっとわからなかったのですが、やっと原因がわかりました。おそらく殆どの人には関係ない原因なのですが、メモしておきたいと思います。
TOPに戻るボタンやアンカーリンクの挙動がおかしい原因
結論から申しますと、私のマウスのホイールが原因でした。
私が使用しているマウスは、Logitechのマウスでホイールがものすごい勢いで回ります。マウスのホイールは指を離した後もしばらく回転を続けます。
そのため、以下のようなシーケンスで不思議現象が起きます。
- 勢いよくホイールでスクロールさせ指を離します。
- ページの最下部まで到達するとページのスクロールは止まります。
- しかし、ホイールは下方向にスクロールするように回転したままです。
- TOPに戻るボタンを押して、TOPに戻ります。
- TOPに戻ってjavascriptが停止した時に、まだホイールの回転は継続しているので、下方向にスクロールを行います。
- その結果、TOPに戻った後に、逆方向にスクロールする変な挙動に見えます。
この現象は、ホイールでページ先頭に勢いよく戻った時に、ヘッダーメニューなどのアンカーリンクをクリックしたときにも逆向きに同じ現象が発生します。
TOPに戻るボタンやアンカーリンクの挙動がおかしい原因の回避方法
ホイールの回転が原因なので、ホイールの回転を止めてからTOPに戻るボタンを押せば、常に正常に動きます。
TOPに戻るボタンやアンカーリンクの挙動がおかしい原因に気が付いた経緯
スムーススクロールのJavascriptが競合しているのではないか？と思っていろいろ解析していました。
しかし、ネットで検索してもそれらしい情報は無く、テーマのデモサイトでも同じように不具合が起きるので、やはりテーマの問題なのか？とか、色々悩みました。
気が付いてみれば、なんと間抜けな原因か！という感じです。
これに気が付いたのは、不思議なスクロールの動きに慣性が働いていたからです。
もしや、マウスのホイールかも？と思って確認したらホイールが止まっていませんでした。
まとめ
おそらく、特殊なマウスを使っていないと出くわさない現象なので、こんな間抜けな悩みを持っている人は限られると思います。
私が使っているマウスは、ロジクール MX ANYWHERE 3です。
このマウスは、MagSpeed電磁気スクロールホイールを搭載し、生産性を大幅に向上しますが、思わぬトラブルも引き起こしますので、ご注意ください。
