jQuery Mobile 使用時のリンク先に「#」が入る場合

なんとも長いタイトルですが、要するにスマホサイト構築時にjQuery Mobileを利用していて、サイト内リンクとして「hoge.html#top」というような記述をアンカータグに入れる場合のおハナシです。
ちなみにこれをやるとページ遷移後は真っ白になります。jQuery Mobileではページ移動をAjaxでもって行うことが基本なので、それを回避するにはコチラコチラのような手法をとります。
ですが、このやり方では冒頭で取り上げたケースは回避できませんでした。調べても何も出てこない‥‥。で、どうするかというと

  1. jQuery Mobile自体を弄る
  2. リンクの記述を変える

を思いつき、後者をとりました。
パスの記述から#を外し、代わりにid名を変数として加えて、リンク先のhtmlに以下のようなscriptを加えます。

<script type="text/javascript">
$(function() {
	var anchor = '#'+getUrlVars()['doc'];
	$("html,body").animate({scrollTop:$(anchor).offset().top},600);
});
</script>

力技(笑)。この場合は変数名を”doc”とし、それを受け取ってjQueryのページ内移動先にしました。
まあ、これをしなくていいような設計を初めから出来ればいいのだけど。

Category: web

Date posted:2012-03-15

コメントする

Posting your comment...

Subscribe to these comments via email