スクロールでもついてくる、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 · ベストアンサー

素朴な疑問があります。
その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、書かないと動かないって知りませんでした。。

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

回答No.6

神崎 渉瑠（@taloo）

* 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

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

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

回答No.4

naokita

<?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

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

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だけがスクロールしても画像がついてきません、、
他に対応方法があるのでしょうか？？

回答No.1

tkmojo

ちゃんと記述見てないんで、的確かどうかわかりませんが、
bodyにこれ入れるとどうですか？

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

補足

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