Androidのアンカーリンク(ページ内リンク)は1回限り。

Mobile

前回もAndroidの不思議な仕様について書きましたが、今回も、Androidの謎仕様について。

PCサイトに限らず、スマホサイトでも、1ページが縦に長くなってくると、アンカーリンク（ページ内リンク）を使用して、ページのTOPに戻るということはよくあると思います。ところが、ある案件の作業中、「Androidだと、2回目から『ページTOPに戻る』のアンカーリンクが効かない」ことが発覚しました。

現象としては、

ページを閲覧中、「ページTOPに戻る」のアンカーリンクをタップしてそのページの先頭に戻る
再びページを閲覧し、再度「ページTOPに戻る」のアンカーリンクをタップする
2回目からはアンカーリンクが効かない(のでページの先頭へ戻れない)

という感じです。

なぜそんな現象が起きるのか、調べてわかったことが、 「Androidでは、アンカーリンク(ページ内リンク)が1回だけしか動作しない」という謎の仕様でした。縦に長くなりがちなスマホサイトでは、ページ内での移動をスムーズにするために、ページ内リンクは便利な機能のはずですが、それが1回しか効かないとは、いったいどういうことなのか？？と、考え込んでいても仕方がないので、「#top」のように「#」を使ったページ内リンクではなく、「jQueryでサイトの先頭に戻す」という方法をとりました。

【Javascript】

$('a.pagetop').click(function() {
$(window).scrollTop(0);
return false;
});

【html】

<a class="pagetop" href="javascript:void(0)">ページTOPへ</a>

この時は、すでにjQueryを使用していたのでこの方法にしましたが、jQuery以外にも、 prototype.jsを使用する方法や、jQuery MobileとJavascriptを併用する方法などがあるようです。また、上記の記述では確認できませんでしたが、Androidのバージョン・機種によっては Javascriptの記述次第でTOPに戻せない例もあるようなので、そこにも注意が必要です。

あらかじめ、ページのTOPに戻るためのボタンが用意されているブラウザアプリの場合は、「#top」でページTOPに戻る必要はないのかもしれませんが、その機能が実装されていないブラウザアプリを使用しているユーザーのことも考えると、ページ内リンクでTOPに戻るは必要な機能だと思うのですが、それがなぜ効かない仕様なのか……謎です。

【参考サイト】