スクロールでもついてくる、TOPへ戻るリンク

スクロールしても一緒についてくる、
ページのTOPへ戻るというリンクをつけたいのですが、
IEの環境でうまく動作しません。
（クロムやfirefoxではうまく動きました。）

イメージとしては、下記のページにあるようなリンクです。
http://www.tokyometro.jp/index.html

何が原因なのか分からないです。


■HTMLファイル
<!-- /pagetopComp -->
<div id="pagetopComp">
<p><a href='#' onclick='backToTop(); return false'><img src="/s/top/images/up.png" alt="ページトップへ" width="36" height="120"/></a></p>
</div>
<!-- /pagetopComp -->


■CSSファイル
#pagetopComp {
width:36px;
height:120px;
position:fixed;
bottom:50px;
right:0;
z-index:999;
}
* html #pagetopComp {
position:absolute;
margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
margin-left:expression(0 - parseInt(this.offsetWidth / 2) + (document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft) + 'px');
}


どこを修正すべきなのかとか、こういう方法がいいよなど
何でもかまいませんのでご教授ください。

お願いします。

No.3 ベストアンサー 回答者： abacabu 回答日時： 2011/04/14 19:12

素朴な疑問があります。

そのCSSの最後のコード、プログラム言語だと認識されておりますでしょうか？
そしてそれを使える様にHTML側のhead内のmetaで設定していますでしょうか？
恐らくJavaScriptだと思うんですが
<meta http-equiv="Content-Script-Type"content="text/javascript" />
これが無いとJavaScriptをHTML内部で使えません。

この回答へのお礼

すごいです！！

<meta http-equiv="Content-Script-Type"content="text/javascript" />

入れたら動きました！！
meta、書かないと動かないって知りませんでした。。

本当にありがとうございます！！

お礼日時：2011/04/15 12:10

No.6 回答者： taloo 回答日時： 2011/04/15 10:21

* html #pagetopComp {

position:absolute;
top: 80%; /*** 追加 ***/
bottom: auto; /*** 追加 ***/
margin-top:expression(略 + 'px');
margin-left:expression(略 + 'px');
}

これでどうでしょうか。

margin-topとmargin-leftが期待値通りなのかどうかちょっとわかりませんが、、、

bottomとmargin-bottomで調整も出来そうですが、そっちはパス。。。

No.5 回答者： tracer 回答日時： 2011/04/15 05:03

仕様的なことを言うと、IE6で要素固定(position:fixed)ができないのは正常です。

逆に言うと、IE6以外の概ねのPCブラウザは、CSSだけで簡単に要素固定ができます。
で、IE6でなんとか要素固定を実現しようとした結果、IE独自機能のexpressionを使う方法が生み出されたわけです。

なぜこんなことを書いているのかというと、HTML&CSSを知る人間からすると、「IEで要素固定ができない」は、前述の理由よりIE6のことだと認識してしまうわけですが、そもそも「IEで動かない」というのは、ほんとうにIE6のことなのかどうか疑わしいからです。
もしIE6でなかったとすると、先にでている回答者さんの善意はほぼ意味をなしません。
IEに限らず、確認したブラウザバージョンくらいは書いたほうがよいのではないでしょうか。
マナーとかモラルなどという言葉は使いたくありませんが、自分が質問されたとすると「自分はどこまで知っていて、どこからがわからない」とか「どういう環境でテストした」とかあったほうが、回答する人間は応えやすいと思いませんか？

No.4 回答者： naokita 回答日時： 2011/04/15 02:41

<?xml version="1.0" encoding="UTF-8"?>

　↑　XML宣言無しにしたらどう？


ちなみに、CSSだと。

body{ margin:0; padding:0;}

#pagetopComp {
width:36px;
height:120px;
position: fixed !important;
position: absolute;
bottom:50px;
right:0 !important;
right: 16px;
z-index:999;
}

* html{ overflow: hidden;}
* html body { height:100%; overflow-y:scroll;}
#pagetopComp a img{ border:0;}

No.2 回答者： tkmojo 回答日時： 2011/04/14 18:11

すいません、それだけじゃ無理でしたか…。

東京メトロのサイトのソースコードをぱくるのが一番手っ取り早いんでしょうけど、
今ちょっとそこまで見てられないので、この前使った記述を書いておきます。

body {
background:url(null) fixed;
height: 100%;
}

#pagetop{
position:fixed;
bottom:0px;
right:0px;
height:100%;
/* forIE */position: expression('absolute');
/* forIE */top: expression(documentElement.scrollTop + 0 + 'px');
}

#pagetop a{
position: absolute;
bottom: ○○px;
right: ○○px;
}

で、pagetopのブロックを一番最後（</body>の前）に記述します。
全体を囲んでるdivの外に書く必要があったと思います。

私の場合はこれで出来ました。
これもどこかから拝借してきたソースですが。

この回答への補足

やっぱりうまくいきませんでした、、


■CSS

#pagetopComp {
width:36px;
height:120px;
position:fixed;
right:0;
z-index:999;
top:80%;
}

* html #pagetopComp {
position:absolute;
margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
margin-left:expression(0 - parseInt(this.offsetWidth / 2) + (document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft) + 'px');
}

bottom:50px;　⇒　top:80%;と、変更したらIE7、IE8ではきちんと
スクロールに画像がついてきてくれるようになりました！

ただ、IE6だけがスクロールしても画像がついてきません、、
他に対応方法があるのでしょうか？？

補足日時：2011/04/14 19:04

No.1 回答者： tkmojo 回答日時： 2011/04/14 17:16

ちゃんと記述見てないんで、的確かどうかわかりませんが、

bodyにこれ入れるとどうですか？

body {
background:url(null) fixed;
height: 100%;
}

この回答への補足

入れてみましたがだめでした ＞＜..

補足日時：2011/04/14 17:56