趣味のサイト制作中に詰まったことが解決したのでメモ。
状況 jQueryでページ内リンクのスムーズスクロールを実装しようと検索し、以下のページからコードを入手、使用したところ、スムーズスクロールが機能しませんでした。
参照ページ プラグイン不要!! jQueryのみで実装するスムーズなスクロール!!｜By U Zensen. 参照したコード
$(function(){
// #で始まるアンカーをクリックした場合に処理
$(‘a[href^=#]’).click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// 移動先を取得
var href= $(this).attr(“href”);
var target = $(href == “#” || href == “” ? ‘html’ : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$(‘body,html’).animate({scrollTop:position}, speed, ‘swing’);
return false;
});
});
解決方法
上記コードの$(‘a[href^=#]’)を$(‘a[href^=“#”]’)に変更（#を”ダブルクォーテーションで囲う）する。
原因
jQueryライブラリのバージョンによる文法解釈の揺らぎによる不具合
解決までの道のり
スムーズスクロールが動いてないことを確認したので、 Chromeのデベロッパーツール（Ctrl+Shift+C か Command+Shift+C、または右クリックから要素の検証を選択）でコンソール欄を参照。 Uncaught Error: Syntax error, unrecognized expression: a[href^=#] と表示されていたので、 a[href^=#]部分に問題があるらしいと見当をつけました。
unrecognized expressionで検索したところ、以下のページから、 mgzl.jp
$(‘a[href=hoge.html]’).css(‘color’,‘#F00’);
このコードはjQuery1.3.2だとエラーを吐かないけど1.5.2だとSyntax error, unrecognized expression
というエラーを吐く正解は
$(‘a[href=“hoge.html”]’).css(‘color’,‘#F00’);
このようにattributeの値をコーテーション（ダブルコーテーション）でくくるとOK
1.3.2と1.5.2の間で修正（変更）が入ったみたい。
具体的にどこのバージョンからかはまだ調べていない。
という記述を見つけたので、試しに#をダブルクォーテーションで囲ってみたところ、無事に動きました。
jQueryのバージョン差による文法解釈の揺らぎが原因ということがわかったところで、 コード元のデモページを参照し、jQueryバージョンを確認したところ1.9.1でした。 私の環境では1.12.4を使用していたので、ためしに元のコードのまま、ライブラリの方の指定をコード元と同じ1.9.1Verにしてみると、こちらでも動作が確認されました。 ただ、"“で囲ってもエラーを吐くことはなかったので、 jQueryの仕様的に”“で囲うのが正解のようです。
今後の為に覚えておこうと思いました。
