別ページのページ内リンクでの不具合(スマホサイト)

質問

現在、スマホサイトを制作しているのですが、iPhoneの実機で確認した際にページ内リンクで不具合が生じており、Androidでは一切同じ現象が起きないことや探してみてもそういった不具合を解決する手段が見当たらず、制作が滞ってしまったため、今回このような質問をさせていただきました。

具体的な不具合の内容としては「sample.html#content」のようなリンクによって、別ページの指定箇所(<div id="content">)へ遷移した場合にその場所からどこへスクロールしても再び同じ指定箇所に引き戻されてしまうような現象が起きています。
説明が下手な上に文章だけでは上手く伝わらないかもしれませんが、もしも同じ事態に直面した経験のある方は解決に至った方法や別の処理で同じ動作を実現する方法など、ページ遷移後も通常通りのスクロールを可能にする方法をお教えいただけたら幸いです。

本来であれば、このような事態に陥ることはまずないことかと思いますし、JavaScriptを多数組み込んでいることが原因である可能性が高いですが、JavaScriptのこの処理を行うとそういった現象が起きることがあるといったアドバイスでも構いませんので、ご教授の程、よろしくお願い致します。

回答No.1

co_maam · ベストアンサー

とあるWebページにおいて、iPadのsafariで同様の現象を確認したことがあります。

原因としては、下記URLにもある通りJavaScriptによるHTMLの書き換えによるものだと思われます。
挙動としては、ページの内容に変更があった時、再描画する際にURLの情報からアンカーの場所に移動しているのだと思われます。

回避方法としては、JavaScriptによるページの変更をしないことですね。
先に述べたWebページでは、きちんと最後までページを読み込ませてからスクロールすると発生しませんでしたので、ページの描画中に色々と内容を変更していて、変更が完了しないうちにスクロールしたのだと思います。
（あくまで予測ですが。）

もしリアルタイムに情報を更新するような画面であれば、その部分だけインラインフレームにすることで回避できるかもしれません。
（全く実証していないので可能性の提示です。）

http://hamalog.tumblr.com/post/3158769710/ios-safari

お礼

細かく解説付きでご回答いただき、ありがとうございます。
やはりJavaScriptの処理が影響してこのような不具合が生じる場合があるのですね。
JavaScriptに関する知識があまりないため、通常通りのページ内リンク(id指定によるもの)ではなく、JavaScriptを用いたページ内リンクで進めることに致しました。
次回また同じような症状が出た場合はco_maamさんにお教えいただいたやり方を試してみたいと思います！