jquery2系ではスムーズなページ内スクロールが動かない！

jqueryのスムーズなページ内リンク

jqueryというjavascriptのライブラリを使うとページ内リンクへのスムーズなスクロールを行うことが出来ます。デモ：こんなの。

ただjqueryにはバージョンがあり大きく分けてバージョンの先頭が1から始まる1.x系と2から始まる2.x系、そして最近出てきた3.x系の3つにわかれます。（jqueryの系による違いをまとめました。）

この記事では2.x系を用いた場合にページ内リンクのスムーズなスクロールが出来なくなる原因とその解決方法について紹介します。

1. jqueryのスムーズなページ内リンク
2. 対策は『”a[href^=’#’]”』みたいに条件をシングルクォートで囲うだけ！
3. シングルクォートで囲うだけで動く理由の推測
4. jquery2系でページ内スクロールが動かないときはクォートを試そう

対策は『”a[href^=’#’]”』みたいに条件をシングルクォートで囲うだけ！

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;
});

それぞれのコードの意味はスムーズなスクロールの実装方法を紹介している記事に譲るとして、このままではjquery2系だとスムーズにスクロールしてくれないのでその対策を。

対策は以下のように一行目の『#（シャープ）』を『’（シングルクォート）』で囲うだけです。

$("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でDOMを操作するには$(“○○○”)という風に書き、丸印のところに例えば『#○○』と書けばidで操作したいDOMを指定でき、また『.○○』と書けばclassで一括して操作対象のDOMを指定できます。

『#』だったり『.』だったりと要素の指定の方法がCSSに似ている、というかほとんど同じ点がjqueryが人気になっている理由の一つです。

こんな風にjqueryではcssで用いられるいろいろな条件でDOMの指定ができるのですが、今回の場合はcssでいうところの属性セレクタを使って「hrefが#で始まっていたら」というDOMの指定をしています。

そしてcssで属性セレクタを使うときって条件の部分（今回の場合だと#）をクォートで囲うのが普通です。

そもそもクォートで囲うのがcssで属性セレクタを使うときの作法だったので、jqueryも2系からその作法に厳密になったということなのだと思います。

jquery2系でページ内スクロールが動かないときはクォートを試そう

jqueryでページ内スクロールがうまくいかない方はぜひ#をシングルクォートで囲う、試してみてくださいね。

おまけ：jquery1系と2系の違い

1系はインターネットエクスプローラー8より前のブラウザでも動作するように作られています。開発者の間ではこういったむかしのブラウザに対応することをレガシー対応といいます。1系はレガシー対応のjqueryということになります。

反対に2系はインターネットエクスプローラー8を含むそれ以前のブラウザを対象外にすることで高速で安定した動作を目指しています。

ただインターネットエクスプローラー8は2016年1月13日にマイクロソフトのサポートからも外されています。サイトでも対応する必要がない場合がほとんどだと思うので、これからjqueryを使う場合は2系（もしくは2016年にリリースされた3系）がオススメです。

3系についてはあんまり情報がなかったので2系との違いがいまいちわかりませんでした。これから入ってくる情報を待ちましょう。