スクロールしても一緒についてくる、
ページの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レディースファッションについて調べていますが、

レディースファッションについて調べていますが、
レディースファッションのお店1店舗につき、どれくらいの種類の商品があるのか
また、どれくらいの種類があれば、レディースファッションのお店を開くことが出来るのか
それが、知りたいです。わかる方教えてください。

Aベストアンサー

アパレルデザイナーです。
店舗の床面積にも依ります。

ディスプレー可能な広さなのか、複合ショップの一角なのか。。。

単体のレディースファッションなら、フルアイテム揃えるよりも、トップスのカットソーから始める方法が簡単でしょう。
理由は仕入先を多数に増やす必要が無いからです。
アパレルにはカットソーのみ作るところ、ボトムだけに特化したところ、トップスのみ、
ジャケットなどの重衣料のみ作るところがあります。

そしてフルアイテム作るアパレルは、直営業態を持つので問屋機能のあるアパレルとの取引になります。
セレクトならあなたの好きなものを、日本や海外で買い付け(バイイング)すればよいだけです。

ただ、カットソーだけ置くなら春夏は売れ易いですが、秋冬はニットや重衣料が必要になります。
アイテム比率を考え、店で完結するコーディネート提案をするなら数量、カラー配分を考えないといけなくなります。
昨今、服だけでなくアクセサリーやバッグ等の雑貨を売る業態も増えています。

Q存在しないページを指定してもTOPページへリダイレクトする方法?

最近ホームページの構成を変更したんですが、検索エンジンから来てルートディレクトリに該当するHTMLファイルがないとpage not foundになってしまいます。
そこで、どんなHTMLファイルにきてもTOPページのindex.htmlに飛ばせる方法ってありますか?
確かhttp://www.directnic.com/ではhttp://www.directnic.com/xxxx とどんなサブディレクトリを指定してもTOPページに行くようになってます。

Aベストアンサー

まず、#2 の方が提示されている様に
.htaccess ファイルを用いて実現できると思います。
(簡単な例示:ErrorDocument 404 /index.html
 DocumentRootから見た絶対パスを記します。)

ただ、ご希望の仕掛けそのままを実現する事は再考をお勧めします。
それはTOPページへ即 飛ばす事です。
閲覧者が当該ページがない事を認識できない可能性があります。
それから質問で提示のサイトも単にTOPページに飛ばしているのではなく、
CGIを用いてエラー情報を編集しているか別のページでTOPページと類似の記述がされている物と思われます。

よって.htaccess ファイルを用いてエラーページを自作してそちらをエラー時に表示する様に指定して、
エラーページにてTOPページと同等の情報を記述しておくかTOPページへのリンクなり自動更新を用意する事をお勧めします。

参考URL:http://www.shtml.jp/htaccess/404.html

Qレディースファッション通販

23歳くらいの安くてかわいいのがあるレディースファッション通販サイトを教えてください。

Aベストアンサー

アマゾン(Amazon)は如何ですか?

http://www.amazon.co.jp/

私は,ここで,よく買いますが,ない物がないくらい,何でも揃っています.
どうぞ!! お試しを・・・.

Qフレームページを更新すると、ページがTOPに戻ってしまいます

| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
|    A          | 
|TOP 日記 BBS チャット|
| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
|               |
|    B           |
|               |
|__________|

Aがメニューページで、BにAからのリンクを反映させています。

更新をクリックすると、BでBBSを表示していても
TOPページ(初期のページ)へ戻ってしまいます。
BにBBSを表示していた時に更新したら、BBSを表示した
状態で更新たいのですが、やり方がわかりません。

どうやったらそうにできるのか教えてください。
よろしくお願いします。

Aベストアンサー

#2です。
大変失礼しました。
思いっきり「回答に対する自身あり」にチェックしておきながら・・・
>トップに戻るのは正常な動作です。
これ訂正します。

フレーム使用のサイトで動作を確認したところ、現在の表示がそのまま更新されるサイトばかりでした。
ただ、腑に落ちないところもあったのでちょっと検索をかけたところ、
サーバの設定によるものだという事がわかりました。(参考URL載せておきます。)

また、この設定はユーザ側で変更が可能な場合もあるという事が書かれています。
ただし、ちょっと高度ですし設定変更が可能なサーバかどうかの問題もあります。

戸惑わせてしまってスミマセン。
普段気にしていなかったので、私も目からウロコでした。

参考URL:http://chaichan.hp.infoseek.co.jp/qa0500/qa528.htm

Qレディースファッション系

レディースファッションにはナチュラル系とカジュアル系のほかに
何系があるのでしょうか。

Aベストアンサー

フェミニン系 いわゆる女の子ファッション
スイート系 リボンやフリル多め

↑の二つをまとめてガーリー系とも言います。

クール系 甘さ控えめカッコイイ系
キャリアスタイルに入れられることも。

ギャル系 とにかく派手。

ロリータ系(ゴスロリ)

パンク系(ゴシック) V系のファンによくいるスタイル


こんなところでしょうか。

Q上フレームページと下フレームページが共にページのTOP(一番上)の位置

上フレームページと下フレームページが共にページのTOP(一番上)の位置が見えるよなリンクの仕方を教えてください。

HTML初心者です。上下2つに分けたフレームページを作っています。
下フレームページの下の方の位置のリンクボタンをクリックすると上フレームページが見えなくなってしまいます。また下フレームページも下の方の位置へリンクしてしまいます。

下フレームページのどの場所のリンクボタンをクリックしても常に
上フレームページと下フレームページが共にページのTOP(一番上)の位置が見えるよなリンクの仕方をご教授ください。初心者ですのでなるべく簡単で具体的なHTMLの書き方を教えてください。
どうぞよろしくお願い致します。

Aベストアンサー

意味がよくわかりませんが、とりあえずjavascriptを使って

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<tytle>Test</tytle>
<script type="text/javascript">
function movetop(f){
f.contentWindow.scrollTo(0,0);
}
</script>
</head>
<frameset rows="50%,*" frameborder="yes" border="1" framespcing="0">
<frame src="/ue.html" onload="movetop(this);" id="ue" name="ue">
<frame src="/shita.html" onload="movetop(this);" id="shita" name="shita">
</frameset>
</html>

意味がよくわかりませんが、とりあえずjavascriptを使って

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<tytle>Test</tytle>
<script type="text/javascript">
function movetop(f){
f.contentWindow.scrollTo(0,0);
}
</script>
</head>
<frameset rows="50%,*" frameborder="yes" borde...続きを読む

Qこれに合うレディースファッション教えてください 条件 ・170㎝で60キロの女が着てもおかしくない服

これに合うレディースファッション教えてください

条件
・170㎝で60キロの女が着てもおかしくない服
・スカートは無し
・いつもストリート系着てるんですがたまには違う感じも着たいなみたいな感じです。(でもセンスないからわからない、、泣)

こんな感じです、思いついたらバンバンいってくださるとうれしいです。

Aベストアンサー

割とシンプルで、

こんな感じとか
https://thumb1.goo.ne.jp/t/sp_thumbnail.pl?sx=640&url=http%3A%2F%2Fimgcc.naver.jp%2Fkaze%2Fmission%2FUSER%2F20130909%2F34%2F3034334%2F10%2F300x468xf120a61450114237e3dcccab.jpg
こんな感じとか
https://thumb1.goo.ne.jp/t/sp_thumbnail.pl?sx=640&url=http%3A%2F%2Fimgcc.naver.jp%2Fkaze%2Fmission%2FUSER%2F20140408%2F44%2F4527224%2F148%2F700x1066x08ffb3cb289868adbb374fc.jpg

Qcss で 「Top へ戻る」 の書き方

h2 で右側に 「Top へ戻る」 を置きたいんですが、
以下のように書いてみると IE6 で背景画像が表示されないのと
かなり無駄が多いなと思いまして、なにか良い書き方ご存知でしょうか...

<style type="text/css">
.h2_container{
background: url(images/bg_h2.jpg);
}
.title{
width: 500px;
float: left;
}
.top{
width: 100px;
float: left;
}
.clear{
clear: both;
}
</style>

<div id="h2_container">
<div class="title"><h2>内容のタイトル</h2></div>
<div class="top"><a href="#">Top へ戻る</a></div>
<div class="clear"></div>
</div>

Aベストアンサー

こんなんどーでしょ。

<style type="text/css">
#h2_container{
overflow: hidden;
display: block !important;
display: inline-block;
background: url(bg.jpg);
}
h2{
float: left;
margin: 0;
width: 500px;
}
.top{
margin-left: 500px;
width: 100px;
}
</style>

<div id="h2_container">
<h2>内容のタイトル</h2>
<p class="top"><a href="#">Top へ戻る</a></p>
</div>

Qレディースファッションの店にカフェスペースの設置

レディースファッションの店にカフェスペースの設置をしたいと思うのですが、一般の小売店で飲食物を出すことは可能でしょうか?

カフェスペースの規模としては、現在ある正面ウインドウのディスプレイを撤去して、横並びカウンターのような物を設けたいと思います。
エスプレッソマシーンやドリンクバーのような簡易的にできるドリンクのみの販売を考えています。

詳しい方よろしくお願いします。

Aベストアンサー

> ドリンクのみの販売を考えています。

販売っていうことはそれは飲食を商売にすることです。
つまり、それは飲食業になり、飲食業の許可が必要となります。
飲食業の許可を受けるにはその許可基準に定められているあらゆる基準をクリアする必要性があると思います。

例えば、シンクを手洗い用と食器洗浄用の2つを設置するとかです。

詳しいことは保健所か営業許認可の専門家である行政書士に確認を取ってみたらどうでしょうか。

Q前のページに戻るとスクロールが一番上になってしまう

このサイト、
http://oshiete.goo.ne.jp/plus/list/c/810001/?dc=10&pg=13
一番下の質問を見て、戻るボタンで前のページに戻ると
スクロールが一番上になってしまうのですが、なぜですか?

一番下の質問を見ようとしている時点でスクロールは一番下に行っています。
一番下の質問を見て戻ってもカーソルを一番下のままにしたいのですが。

IEは8で、OSはXPです。

Aベストアンサー

普通に戻りますが?--firefox,Opera,Safar,Chromeでは・・
暫く待ってみたら?
・・・はっきり言ってIE8のバグです。回避策として、ツールで「互換表示」を選択することですかね。互換表示のリストに加えておくのもよいかも。一番のお勧めはfirefoxなど他のブラウザを使うこと。


人気Q&Aランキング

おすすめ情報