親画面のスクロール位置を保持する

/ ソフトウエア開発部　

松本 (2010年1月22日 20:16)
ソフトウエア開発部

HTMLの<a>タグをクリックし、ポップアップで子画面を表示する場合に、
親画面のスクロール位置を保持するには、
<a>タグの記述を以下のようにすると実現できます。

【1】<a href="#" onClick="window.open(......); return false;"></a>

【2】<a href="javascript:void(0);" onClick="window.open(......);"></a>

【3】<a href="javascript:void(0);" onClick="window.open(......); return false;"></a>

私はよく、リンクボタン押下時に、
onClickイベントで画面遷移やウィンドウを立ち上げたいような場合、
href属性に[#]を設定していました。

ところが、href="#"だけでは、javascriptのwindow.scroll等を設定しても、
親画面のスクロール位置は保持されず、画面のTopに戻ってしまいます。

失敗例：<a href="#" onclick="window.open(......);"></a>

これを回避するためには、onClickイベントの最後に、
[return false;]を追加すれば良く、
親画面のスクロール位置を保持することができます【1】。

また、href="#"を設定したい場合には、
href="javascript:void(0);"と書くこともできます。

href="javascript:void(0);"を設定した場合は、
onClickに[return false;]を設定しなくても、
親スクロールの位置を保持することができました【2】。

ただし、href="javascript:void(0);"を指定した場合、クロスブラウザの観点上、
onClickに[return false;]を設定したほうが、動作が安定するようなので、
onClickに[return false;]も設定しておいたほうが、安全だと思います【3】。

この3つの書き方の中では、
href属性にjavascriptを設定するのは、W3C非推奨のようなので、
【1】のように設定するのが一番良く、
[javascript:void(0)]を使うのであれば、【3】にするのが良いでしょう。

※主な動作確認にはIE6を使用しました。
　【1】、【3】については、IE6、IE7、IE8、Fx3.5で確認済みです。

「システム開発ブログ」へのコメントやご意見等ありましたら、ファンページまでお願いします。 Facebook のファンページ

[PR]
他社のシステムも直します。資産を活かしてシステムリフォーム

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できます

システム開発のアイロベックス（東京都新宿区）