ページ内のジャンプが動かない
初回公開：2018/01/08
最終更新：未
最近になって、当サイトのページ内のジャンプが動かない事に気が付いた。
IEやFireFoxなら動くのだが、chromeだとダメ。
aタグとかのhtmlの記述は間違ってなさそう。
面倒臭いので、しばらくほおっておいたのだ、時間ができたので遅ればせながら原因を調べてみた。
「chrome href 移動しない」とか「href 移動しない ページ内」とかのキーワードを使ってネットでググってみても参考になる記事が見当たらない。
しょうがないので、いろいろとソースをいじってみると、別ファイルのJavaScriptの読み込みを外してみると動く事がわかった。
JavaScriptのコードはだいぶ前にどっかのサイトからパクってきたもので、なんでこんなコードを入れたのか忘れてしまっていたのだが、
スムーススクロールのためのJavaScriptが邪魔をしているらしい。
今度は、「スムーススクロール」というキーワードでググってみると。
スムーススクロールというのはジャンプした時にゆっくり画面をスクロールさせるものらしい。
上記のサイトの
$('body,html').animate({scrollTop:position}, speed, 'swing');
の部分が、以下のようになっていた。
$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
原因はいろいろあって、jQuery 1.9 で $.browser が使えなくなってしまったものかなと思ってみたりもした。
でも、私の使っているjQueryのバージョンはv1.6.3、
これが原因でもなさそう。
さらに調べてみるとChromeのJavaScriptで画面スクロール量（画面スクロールの位置）を取得できる要素が、
document.bodyじゃなくてdocument.documentElementに変わった事によるみたい。
多分、最初はChromeでもちゃんと動いていたんじゃないかな？
対処方法はいろいろとあって
時代とともに世の中は変化するもので、いろいろなブラウザに対応するのは難しい。
私だけでなく、みんな苦労してるんだろうな。
jQuery3系だとまた別の部分の修正が必要らしい。