jQuery1.12.Xでスムーズスクロールが機能しなくなった時の解決策

この記事の所要時間は約 3分です。
イメージ画像

スムーズスクロールっていう
”するするっと下に(上に)滑らかにページ移動する”機能、知ってる方も多いでしょう。

これが、とある運営サイトの一つでいきなり機能しなくなっちゃったんです。

調べてみたらどうやらjQueryのバージョンアップに伴うトラブルでした。

スポンサーリンク


スムーズスクロールって?

ご存知ない方のために書いときますが、
スムーズスクロールというのはページ内のリンク先をクリックすると
そのページのリンク先に滑らかにページが移動するスクロール演出のことです。

こちらのリンク→「スムーズスクロール」をクリックすると、
下の方にある「スムーズスクロール終点はココ」という場所まで
するするっと滑らかな動きで移動したかと思いますが、その動きのことです。

この機能がないページだと
リンク先をクリックした際にページ内で一気に画面が切り替わってしまうため、
訪問者にとってはどのあたりに”飛んだ”のかわかりにくくなっちゃいますでしょ。

便利な機能なんで最近のサイトにはほぼ標準で搭載されてる機能かと思います。

 

スムーズスクロール用コードの一例

ところがですよ。

ワードプレステーマのハミングバードを使ってるサイトでテーマのバージョンアップを行ったところ、このスムーズスクロールが急に効かなくなっちゃいまして。

”トップへ戻る”ボタンまで消えちゃう始末。

コンフリクトだぁ、コピペミスだぁといろいろ探ってはみたものの、
一向に問題が解決しやしない。

ちなみにこれまで私が使ってきたスムーズスクロール用のスクリプトがこちら↓。

jQueryで動きます

割と有名なコードなので採用している方も多いでしょう。

ワードプレスのテーマの中にも最初から搭載しているものも多いですね。

このコードはワードプレスに限らずHTMLサイトでも使える一般的なスクリプトです。

ただしこのスクリプトを最初に採用したのはかなり前でした。

だいぶ前にどこかの記事に書いてあったスクリプトをコピーして
そのまま現在まで使わせてもらってるというものです。

※スムーズスクロール終点はココ

 

原因はjQuery?

なんで機能しないのか?

こういう時は”沸騰”している頭を一旦冷やすと解決することが多いんです。

(問題が解決しない時は一度その問題から離れて頭を休ませるといいですよ)

 

そしてある日のこと。

とあるサイトのソースを見てたら
私が使っているスクリプトと同じものを使っているのを目にして、
そのままコピーして自分の使っているスクリプトと比較してみたんです。

パッと見は全く一緒。

しかしよ~く見てみると1ヵ所だけ違っていました。

先ほどのコード3行目のa[href^=#]というところがa[href^="#"]と、
#が「" "」でくくられてたんです。

ちなみにこの意味は『aタグかつhref属性が#で始まる要素のみ』というものだそうです。(私、スクリプト系はズブの素人であります)

単純に#の前後を「” ”」でくくっただけなんですが、
今まで使っていたスクリプトを同じように修正してやってみたら……
あらら、見事にスムーズスクロールが動いたじゃないですか。

なんで?

 

理由はこうです。

ワードプレステーマのハミングバードの初期バージョンのjQueryは1.8.3でした。

ところがバージョンアップしたものは1.12.3を採用してたんです。

詳しくはわかりませんが、jQueryが1.12.xにバージョンアップしたことで、
スムーズスクロールのスクリプト内の構文チェックが厳密になったらしいんですね。

それに伴って、
『#は引用符で囲まないと正常に認識してくれなくなった』ということみたいです。

こんなもん、
スクリプト素人にはわかるはずもない。。。

まあでもこれでまた一つ勉強になったか。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)