スマートフォンでページ内リンク
このあいだスマートフォンで
<a href="#hoge">hogeへ戻る</a>
がうまく動かなくて泣いた。
どうやらURLに#hogeがついてからまた同じIDのページ内リンクを実行しようとすると
同じURLなのでページ内リンクの処理起こらない模様。。。
jsで対処するしかないのでjqueryで書きました...
意外とめんどくさいスマートフォン
/* ページ内リンク */ $('a').click(function(e){ var url = $(this).attr('href'); if(url.indexOf('#') > -1){ e.preventDefault(); $(window).scrollTop($(url).offset().top); return false; } });
aタグが押されたらページ内リンク(hrefの中身がid)か判別して
ページ内リンクだったら
preventDefault()でaタグのイベントをころして
scrollTopで移動先を指定してます。そしたらURLにidが追加されないし何度同じリンク押してもページ内リンクが可能です。
return falseも入れないとAndroidブラウザだとうまく動かないみたいです...。
なにかもっといい方法あったら教えて下さい。
/*追記*/
touchイベント使った方が早いみたいなのでちょっと書いてみます。
/*追記*/
にーさん(@21f)がtouchイベント使ったやつを書いてくれましたー!
参考サイト
aタグのリンクを無効にする | commit purring cat to memory
http://reinyan.pussycat.jp/wpc/?p=927