tochio

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

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

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

現象としては、

  1. ページを閲覧中、「ページTOPに戻る」のアンカーリンクをタップしてそのページの先頭に戻る
  2. 再びページを閲覧し、再度「ページTOPに戻る」のアンカーリンクをタップする
  3. 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に戻るは 必要な機能だと思うのですが、それがなぜ効かない仕様なのか……謎です。

【参考サイト】

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら