iPhoneでアンカー位置に飛ばない場合はリダイレクトのせいかも

iPhoneでアンカーを指定したリンクをタップすると、画面遷移はするけども、アンカーの位置で表示されないという挙動がありました。 その原因はリダイレクトでした。

発生した挙動・状況

画面遷移して別の画面を開いたときにアンカーの位置を表示される、というのが期待している挙動だったのですが、画面遷移をしてもアンカー位置にスクロールされず、ページトップで表示されてしまいました。 アンカーはidを指定しており、aタグはhref属性の末尾にid名を追記しているだけの、シンプルなつくりです。 下記のような感じです。

<!-- 画面遷移してアンカーリンクの位置に遷移するテキストリンク -->
<a rel="nofollow" href="hogehoge.jp/hugahuga.php#anchor">アンカーリンク</a>

<!-- 画面遷移先のアンカーリンク -->
<div id="anchor">アンカーリンク</div>

確認した端末はiPhone6で、ブラウザはsafariでした。 android端末の、標準ブラウザ、chrome、firefox、operaでも確認しましたが、正常に遷移先の画面でアンカー位置で表示されていました。

どうやらリダイレクトが原因らしい

同じような現象で悩んでいる人がいないかと思い、調べてみたところ、こういう投稿をみつけました。

Opera, IE, Chrome, Firefox will carry over the anchor to the new page. However safari loses the anchor on the redirect.

引用元: Anchor tag doesn't work in iPhone Safari

要するに、safariはリダイレクが掛かるとアンカーを引き継がないという挙動のようです。 先ほどリンクをhogehoge.jp/hugahuga.php#anchorという風にかいていましたが、 実は、この現象が発生したサイトは、レスポンシブではなかったので、PCサイトをスマホで開いたときはスマホ用のURLにリダイレクトされるようになっていました。 ついつい「リダイレクトされるからスマホの画面作ってるけどPCのURLのままでいいっしょ」という軽い気持ちで、 hogehoge.jp/sp/hugahuga.php#anchorというようにスマホ用のURLを指定しなかったのがいけませんでした。

並べて書いたほうがわかりやすいですね。 hogehoge.jp/hugahuga.php#anchor hogehoge.jp/sp/hugahuga.php#anchor こういうことです。

ちゃんとスマホ用のリンクを指定すると、iPhoneでも遷移先のアンカー位置で表示されることが確認できました。