【解説】data-ajax=”false”とは？意味・使い方・スムーススクロールとの関係まで徹底解説

Posted on by

Web制作をしていると、時々見かける属性 data-ajax="false"。
特に jQuery Mobile を使ったサイトでは頻繁に出てくる記述ですが、
「これって何のために書いてるの？」「入れると何が変わるの？」
と疑問に思った方もいるのではないでしょうか。

本記事では、data-ajax="false" の意味や用途、
そして スムーススクロールなどの機能との関係性について、わかりやすく解説していきます。

data-ajax="false"とは？

data-ajax="false" は、jQuery Mobile というライブラリで使用される data-* 属性のひとつです。

目的は「リンクを通常のHTML方式で遷移させる」

jQuery Mobile は、リンク先のページを
Ajaxで非同期に読み込んで差し替えるという機能をデフォルトで持っています。

たとえば、以下のようなリンクがあったとします。

<a href="about.html">Aboutページへ</a>

このリンクをクリックすると、jQuery Mobileではページ全体をリロードせず、
Ajaxで about.html を読み込んで部分的に差し替える、という挙動になります。

しかし、Ajaxによる遷移には以下のようなデメリットもあります。

  • ページ内のJavaScriptが再実行されない
  • ページタイトルが正しく変更されないことがある
  • 履歴管理やSEO上の不利が発生する場合がある

これを回避したい場合に使うのが、data-ajax="false" という指定です。

<a href="about.html" data-ajax="false">通常遷移で移動</a>

このように書くことで、Ajaxによるページ遷移を無効化し、
通常のHTML遷移（リロード）でページを切り替えることができます。

なぜ data-ajax="false" を使うのか？

理由は主に以下の2つです。

JavaScriptやCSSをページごとに切り替えたい

Ajax遷移では、ページを差し替えても <head> 要素が読み込まれないため、
ページごとに異なるCSSやJSを使いたいときに困ることがあります。

data-ajax="false" を使えばページ全体が再読み込みされるので、JSやCSSも確実に切り替わります。

スムーススクロールやモーダルなどの機能が正常に動かない

jQuery Mobile の Ajax遷移では、JavaScriptが1度しか実行されないため、
スクロール制御や開閉アニメーションが次のページで動かなくなることがあります。

このようなときにも data-ajax="false" を使って、通常のHTML遷移にすることで回避できます。

スムーススクロールとの関係

data-ajax="false" を使用していると、ページ内リンクのスムーススクロールが効かない場合があります。

たとえば、以下のようなアンカーリンクを設置したとします。

<a href="#section1" data-ajax="false">セクション1へ</a>

通常であれば、クリックすると id="section1" の位置にスムースにスクロールしますが、
このように data-ajax="false" があると、ページが再読み込みされてしまい、
スムーススクロール用のJavaScriptが実行される前に画面が切り替わってしまうことになります。

スムーススクロールを動かすには？

解決策：data-ajax を使わずに JavaScript で制御

<a href="#section1" class="smooth-scroll">セクション1へ</a>
$('a.smooth-scroll[href^="#"]').on('click', function(e) {
  e.preventDefault();
  const target = $($(this).attr('href'));
  if (target.length) {
    $('html, body').animate({
      scrollTop: target.offset().top
    }, 600); // 600msでスクロール
  }
});

このように、スムーススクロールの処理をJavaScriptで明示的に制御すれば、
data-ajax="false" を使わなくても、自然なスクロールアニメーションを実現できます。

よくある誤解と注意点

誤解実際には…
data-ajax="false" はどんなサイトでも使える→ jQuery Mobile 専用の属性です。通常のHTMLサイトでは不要です。
スムーススクロールには data-ajax="false" が必要→ むしろ邪魔になることもあります。JavaScript制御の方が確実です。
#idリンクが効かないのは data-ajax="false" のせい→ idが存在しない、JavaScriptの順番がおかしい、など他の原因の可能性も高いです。

まとめ

  • data-ajax="false" は jQuery Mobile 専用の属性
  • 通常のページ遷移（リロード）を強制するために使う
  • Ajax遷移が不要なとき、または不具合が出るときに有効
  • スムーススクロールとの相性はよくないため、JavaScriptで制御するのがベスト
  • 通常のHTMLサイトでは、この属性は基本的に不要

おわりに

もしあなたが jQuery Mobile を使っていないのであれば、
data-ajax="false" を無理に使う必要はありません。
むしろ、モダンなWeb制作では不要な記述となっていることが多いため、
「なぜ必要なのか？」を理解して使うことが大切です。

スムーススクロールやページ遷移の制御で悩んでいる方は、
ぜひJavaScriptによる明示的な制御も試してみてください。