まさかのIE5(Quirks)、position:fixedが効かないのでjavascriptでページ先頭に移動した。

ブックマークレットを実行すると、ページ内にdivの枠を表示して入力を促す機能を実装しようとした時の事です。

ページのどこを表示していても、見える位置にdiv領域を表示したくて、position:fixed のスタイルをつけました。

IE5,6では CSSの position:fixedが効かない

ところが、社内のそのページは、IE5とか6とか古いブラウザでしかしか対応していないという始末。新IEのQuirksモードで動作しており、position:fixedが聞きませんでした。

「Quirksって何？」という状態だったので軽く調べてみました。

IE6〜9とIE10とでQuirksモードの動作が違う、どうすれば解決できるか？ – ふろしき.js
参考にしたページです。

記事の方向性は関係ないですが、これでだいたい理解できました。

position:absolute + ページスクロールで回避

position:absoluteで先頭に表示することはできたので、先頭に表示したあとに、ページの先頭までスクロールしてやることにしました。

document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

このJavaScriptをブックマークレット内に記述してやれば、ブックマークレット実行時にページ先頭までスクロールしてくれる様になります。

[JavaScript] アニメーションなしでページトップへスクロールさせる方法 – 零弐壱蜂
参考にしたページです。

何とか目標を達成･･･

これで、無事にdiv領域を見える位置に置くことができました。

化石のようなブラウザを相手にしている人は知っておいて損はないかと思います。