カテゴリページにインラインフレームを設置したがページ内リンクがうまく作動しない

Question

カテゴリページの「カテゴリ説明文上」と「スマートフォン用カテゴリ説明文」に
インラインフレームを設置してhtmlを読み込んでいます。

そのhtml内に「目次」として、ページ内リンクを設置しているのですが、下記のようにうまく作動せず困っています。

・google chromeブラウザ→リンクが作動しない
・IEブラウザ→リンクは作動するが、リンク先にジャンプすると、ページのその位置より上の部分がすべて表示されなくなってしまう。

■該当のカテゴリページはこちらです。
https://item.rakuten.co.jp/okaeshi/c/0000000749/

■インラインフレームの中のhtmはこちらです。
■https://www.rakuten.ne.jp/gold/okaeshi/oseibo/sasiire.htm

■カテゴリページにインラインフレームを読み込んでいるタグはこちらです。


■HTMLのアンカータグは普通にページ内リンクとして下記のように設定しています。
リンク元　
リンク先　



インラインフレームにすることで、ページ内リンクが作動していないのでしょうか。
解決方法をご教授いただけると幸いです。

Answer

ECマスターズの伊藤です。

> ・google chromeブラウザ→リンクが作動しない
> ・IEブラウザ→リンクは作動するが、リンク先にジャンプすると、ページのその位置より上の部分がすべて表示されなくなってしまう。

> インラインフレームにすることで、ページ内リンクが作動していないのでしょうか。

ご認識頂いております通り、
iframeの場合、ページ内リンクが
動作いたしません。


ページ内リンクですが
例えば、
ページがウィンドの半分までしかない状態で
上部にページ内リンクのリンク元
半分のところにリンク先を設置した場合

ページにスクロールが発生しないので
ページ内リンクは動作しなくなっています。


同様に、iframeに高さが指定され、
scrolling="no"が指定されているため
iframe内はページにスクロールが
発生しない状態となっているため

googleでは、ページ内リンクが動作しない

IEでは、ページ内リンクが動作するが
iframe内で動作するため
scrolling="no"の影響で
スクロールができない

といった状態となっています。


> 解決方法をご教授いただけると幸いです。

・iframeを使わずに、直接ページ内に記述していただく
・iframeに高さをもたせ、スクロールするようにする

といった方法になると思います。

ご希望のご回答と異なるかと思いますが
仕組み上、ご理解いただきますよう、お願いいたします。