まるwebデザイン

wordpressカスタマイズとかwebデザインとかSNSのメモとかのブログ

jQuery Mobileでページ内リンク

      2013/02/02

jQuery Mobileはスマートフォンページを簡単に作れるモバイルフレームワークで
とっても便利なのですが、「#」を使ったページ内リンクができないという問題があります。

jsを使うことで、jQuery Mobile内でもページ内リンクを実現できます。

<script type="text/javascript">
$('.top').live('click', function() {
$.mobile.silentScroll();
});	
</script>
<a class="top" href="#" data-role="button">Topへ</a>

上記コードを追加するとページトップに戻るページ内リンクが作れます。

特定の位置にページ内リンクで移動させたい場合は、「$.mobile.silentScroll();」にページ上からの座標を指定するする事で実現できます。

 - jQuery