【jQuery】jQuery ver.1.12.0でスムーススクロールが動かなかった件に対応

HTML5 Boilerplateを使ってページを作成し、メニュー遷移やページ内遷移のためにスムーススクロールを導入しました。

HTML5 Boilerplate

導入と言ってもググればすぐに出てくる、よくあるjQueryのスクリプトです。

$('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, "swing");
  return false;
});

使い慣れたスクリプトなので何の疑問もなく導入しましたが、なぜかエラーが出て動きませんでした…
記述を何度も確かめて、書き方にも問題なさそうなので原因が分からず詰まっていました。

原因はjQuery ver.1.12.0

結論から言って、HTML5 Boilerplate（v5.3.0）に同梱されているjQuery ver.1.12.0が原因でした。
調べたところ、Gitでディスカッションされている情報がビンゴでした。

1.12.0 vs 1.11.2 selectors with # broken · Issue #2824 · jquery/jquery · GitHub

ver.1.12.0では、href属性に引用符を付けないと動かなかったよってことですね。

$('a[href^=#]')

↓

$('a[href^="#"]')

CSSセレクタの書き方としては、引用符を付けた方が確かに正しいしな…と納得できるものです。

jQueryの2系や3系ではどうなのかは確認していませんが、もし動かなかった場合は引用符を付けてみると動くかもしれません。

jQuery ver.1.12.0用スムーススクロール

引用符を付けたjQuery ver.1.12.0用スクリプト

$('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, "swing");
  return false;
});