jQuery Mobile 使用時のリンク先に「#」が入る場合
なんとも長いタイトルですが、要するにスマホサイト構築時にjQuery Mobileを利用していて、サイト内リンクとして「hoge.html#top」というような記述をアンカータグに入れる場合のおハナシです。
ちなみにこれをやるとページ遷移後は真っ白になります。jQuery Mobileではページ移動をAjaxでもって行うことが基本なので、それを回避するにはコチラやコチラのような手法をとります。
ですが、このやり方では冒頭で取り上げたケースは回避できませんでした。調べても何も出てこない‥‥。で、どうするかというと
- jQuery Mobile自体を弄る
- リンクの記述を変える
を思いつき、後者をとりました。
パスの記述から#を外し、代わりにid名を変数として加えて、リンク先のhtmlに以下のようなscriptを加えます。
<script type="text/javascript">
$(function() {
var anchor = '#'+getUrlVars()['doc'];
$("html,body").animate({scrollTop:$(anchor).offset().top},600);
});
</script>
力技（笑）。この場合は変数名を”doc”とし、それを受け取ってjQueryのページ内移動先にしました。
まあ、これをしなくていいような設計を初めから出来ればいいのだけど。
