jQuery1.12.Xでスムーズスクロールが機能しなくなった時の解決策
も・く・じ
スムーズスクロールっていう”するするっと下に（上に）滑らかにページ移動する”機能、知ってる方も多いでしょう。
これが、とある運営サイトの一つでいきなり機能しなくなっちゃったんです。
調べてみたらどうやらjQueryのバージョンアップに伴うトラブルでした。
スムーズスクロールって？
ご存知ない方のために書いときますが、スムーズスクロールというのはページ内のリンク先をクリックするとそのページのリンク先に滑らかにページが移動するスクロール演出のことです。
こちらのリンク→「スムーズスクロール」をクリックすると、下の方にある「スムーズスクロール終点はココ」という場所までするするっと滑らかな動きで移動したかと思いますが、その動きのことです。
この機能がないページだとリンク先をクリックした際にページ内で一気に画面が切り替わってしまうため、訪問者にとってはどのあたりに”飛んだ”のかわかりにくくなっちゃいますでしょ。
便利な機能なんで最近のサイトにはほぼ標準で搭載されてる機能かと思います。
スムーズスクロール用コードの一例
ところがですよ。
ワードプレステーマの「ハミングバード」
を使ってるサイトでテーマのバージョンアップを行ったところ、このスムーズスクロールが急に効かなくなっちゃいまして。
”トップへ戻る”ボタンまで消えちゃう始末。
コンフリクトだぁ、コピペミスだぁといろいろ探ってはみたものの、一向に問題が解決しやしない。
ちなみにこれまで私が使ってきたスムーズスクロール用のスクリプトがこちら↓。
（jQueryで動きます）
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(function(){ $('a[href^=#]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "linear"); return false; }); }); </script> |
割と有名なコードなので採用している方も多いでしょう。
ワードプレスのテーマの中にも最初から搭載しているものも多いですね。
このコードはワードプレスに限らずHTMLサイトでも使える一般的なスクリプトです。
ただしこのスクリプトを最初に採用したのはかなり前でした。
だいぶ前にどこかの記事に書いてあったスクリプトをコピーしてそのまま現在まで使わせてもらってるというものです。
※スムーズスクロール終点はココ
原因はjQuery？
なんで機能しないのか？
こういう時は”沸騰”している頭を一旦冷やすと解決することが多いんです。
（問題が解決しない時は一度その問題から離れて頭を休ませるといいですよ）
そしてある日のこと。
とあるサイトのソースを見てたら私が使っているスクリプトと同じものを使っているのを目にしたんです。
そこで物は試しと、そのままコピーして自分の使っているスクリプトと比較してみたんです。
パッと見は全く一緒。
しかしよ～く見てみると1ヵ所だけ違っていたんです。
先ほどのコード3行目のa[href^=#]というところがa[href^="#"]と、#が「" "」でくくられてたんです。
ちなみにこの意味は『aタグかつhref属性が#で始まる要素のみ』というものだそうです。
単純に#の前後を「” ”」でくくっただけなんですが、今まで使っていたスクリプトを同じように修正してやってみたら…あらら、見事にスムーズスクロールが動いたじゃないですか。
なんで？
理由はこうです。
ワードプレステーマのハミングバードの初期バージョンのjQueryは1.8.3でした。
ところがバージョンアップしたものは1.12.3を採用してたんです。
詳しくはわかりませんが、jQueryが1.12.xにバージョンアップしたことで、スムーズスクロールのスクリプト内の構文チェックが厳密になったらしいんですね。
それに伴って、『#は引用符で囲まないと正常に認識してくれなくなった』ということみたいです。
まあでもこれでまた一つ勉強になったか。
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓