jQuery Mobile1.3.1で「aタグ」のページ内でのアンカーの機能をリンクを使用します。(成功しました)
【準備】
１．「jQuery Mobile1.3.1の使用方法(画像が必要な場合)」の手順の通り、jQuery Mobileに必要なファイルを配置しておきます。
【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.min.css" />
</head>
<body>
<a href="#aaa" class="anchor">移動</a><br/ >
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
<div id="aaa">ここに移動したい！</a><br/ >
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).on('click', 'a.anchor', function(e){
e.preventDefault();
var y = $($(this).attr('href')).offset().top;
$.mobile.silentScroll(y);
});
</script>
</body>
</html>
【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。
【結論】
jQuery Mobileでは#を使用したページ内へのアンカーリンクは通常では出来ませんでした。
ですので、以下の手順でページ内アンカーを実現する方法があるようです。
１．リンクの「aタグ」に「class="anchor"」を指定。
２．リンクの「aタグ」の「href属性」には#＋飛び先のIDを指定。(上記の例はhref="#aaa")
３．リンクの飛び先のタグにIDを指定。(上記の例はdivタグにid="aaa")
４．jQuery・jQuery Mobileロード後に、以下のjQueryを記載。
<script type="text/javascript">
$(document).on('click', 'a.anchor', function(e){
e.preventDefault();
var y = $($(this).attr('href')).offset().top;
$.mobile.silentScroll(y);
});
</script>
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。