ついに夏本番!さぁ、家族でキャンプに行くぞ! >>

スクロールしても一緒についてくる、
ページの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');
}


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

お願いします。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

素朴な疑問があります。


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

すごいです!!

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

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

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

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

* html #pagetopComp {


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

これでどうでしょうか。

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

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

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


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

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

<?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;}
    • good
    • 0

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


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

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
    • good
    • 0

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


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

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

この回答への補足

入れてみましたがだめでした ><..

補足日時:2011/04/14 17:56
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q空白行について(できればCSS)

こんにちは!

デザイン上、どうしても2行分以上の空白行が欲しいときがあります。
現状でやってる方法としては<hr>タグの高さで調節か<pre>タグで間に改行を入れて誤魔化しています
<br>タグの連続はいけないと言われました。これは改行タグであって空白行を作るものではないと

CSS使ってて、これからなくなるタグなんかも排除しているところなので
間違いのない方法を知りたいのです。
そこで、2行分とか3行分とかの改行をする際に、他にどんな方法があるか教えてください!

なんとなく今自分がやってる方法は自信がありません。

Aベストアンサー

こんにちは、じゃんぬねっと です。

margin とかで空の空間を作れば良いのでは?

<p style="margin-bottom:20px">
 うんたらかんたら。<br>
 ほげほげ、ふーばー。
</p>

<p>
 おんどぅるるらぎったんでぃすかー!!<br>
 ダヂヤーナザーーーン。
</p>

とか。

CSS で定義するのも可能。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">


人気Q&Aランキング