suzuboss.info

実際に使ってみた・試してみた経験が誰かの「かゆいところに手が届く」なら幸いです。

Web系

jQuery Mobileでページ内アンカーと外部からのアンカー

投稿日:2015/02/02 更新日:

ほとんど触ったことのない『jQuery Mobile』ですが、少し触る機会がありました。

ハッシュタグを使ったアンカーで、通常はハッシュタグで指定の箇所へページ内アンカーとして動くのですが、jQuery Mobileは仕様上、ハッシュでのアンカーは効かないようです。

ページ内でアンカーを有効にするには、data-ajax属性に「false」を指定すると通常のページ遷移を行なうらしいです。これだけでOK。

<a href="http://suzuboss.info/" data-ajax="false">suzuboss.info</a>

ここまでは良かったのだけど、別ページに飛ぶアンカーの場合に、一瞬目的の場所へいくものの、すぐにページトップへ行ってしまう。別ページにしちゃえばいいんだけど、そうもいきませんでした。。。

http://suzuboss.info/sample.html#hoge

半日調べて行き着いたのが以下のページ。

http://wenda.baba.io/questions/1771922/jquery-mobile-anchor-links-without-ajax-not-loading.html

そうかイベントをキャンセルすればよかったのか。。。

最終的にページ内アンカーはぬるっと動くのも入れたのでこんな感じに

$(document).ready(function() {
	$("a:not([data-rel=dialog])").attr({ "data-ajax":"false" });
});

$(document).bind("pageshow",function(e){
    var elem;
    elem = $(location.hash);
    if(elem){
        $(document).bind("silentscroll",function(e,data) {
            $(this).unbind(e);
            window.scrollTo(0, elem.offset().top);
        });
    }

	$(".smoothScroll").click(function(){
		var speed = 500;
		var target = $(this).attr("href");
		var position = $(target).offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});

});

ページ内アンカーって使う機会あると思うんだけどな。なぜこんな仕様なのだろうか?解決してよかった。

【追記】 2015/02/07

リンクだけかと思っていたら、フォームもajaxで変な挙動になったので、同様にformタグへ『data-ajax=”false”』と記述しておいた。jQuery Mobileが嫌いです。

-Web系

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Google API OAuth 2.0のリフレッシュトークンでハマった

WebアプリでGoogle Search ConsoleのAPIを使うにあたり、リフレッシュトークン関連でハマったのでメモしておきます。 アクセストークンの取得 特に何も考えずにアクセストークンを取得 …

no image

Google Chartsを使った簡単な折れ線グラフ

時々ですが、Webページにグラフを埋め込む必要があったりする場面があります。検索をすればサンプルはたくさんできてくるので大変ありがたい所です。使うライブラリとしては「Google Charts」と「C …

Logicool C310(V-U0015)をSkypeで使ってみた

在宅の方と仕事をする際にSkypeを使っています。顔を見ながら話せると電話よりも伝わるのでいいですよね。 デスクトップでSkypeを使う時にはWebカメラを利用しています。使っているのはロジクールの「 …

no image

get_postsでカスタムフィールドにチェックボックスを使っていた場合

WordPressのプラグイン「Advanced Custom Fields」を使ってカスタムフィールを使い、表示するかしないかの判定をするために、フィールドタイプをチェックボックスにしてカスタムフィ …

no image

EC-CUBEで規格以外に項目を追加した②

前回はテンプレートファイルのカスタマイズをしたのでその続きから始めます。 Classファイルの修正 ディレクトリ内の『data/class/』に各種クラスファイルが保存されています。修正や追加をする場 …

記事を探す