Float Layerでぐぃ～んと！
頂いてばかりなので、僕からも提供させていただきます～。
旧MSF-NETで採用していたページのトップへ戻る為の矢印の付け方です。
ブログのように縦長になって行く時には便利です。
このJavaScriptはパクってますが、少しだけ改良加えてあります...
元ソースはたしかニコンのサイトだったかな。
しかも、古いので、OperaやFireFoxではどう動くか謎です～ｗ
でわ、解説行きます～。まず下記のファイルをダウンロードして、ローカルへアップロードして下さい。
jumpToAnchor.js
lib.js
layer.js
arrow.gif
とりあえず動くようにしましょう。
テンプレートの <head> ～ </head>の間に
<script type="text/javascript" src="<$MTBlogURL$>lib.js"></script>と追加します。
<script type="text/javascript" src="<$MTBlogURL$>jumpToAnchor.js"></script>
<script language="JavaScript" src="<$MTBlogURL$>layer.js"></script>
</head>タグのすぐ下にある<body>タグ内に「onLoad="start()"」文を追加します。
<body onLoad="start()" class="layout-three-column">
小粋空間さんの３カラムレイアウトを使用している人はこんな感じかな。
次に下記の文をbodyタグ内のレイアウトに影響しない場所などに追加します。
レイヤータグなので、</body> タグの前とかで構わないです。
<div id="floatLayer" style="position:absolute;height:0px;width:0px;left:0px;top:0px;z-index:100">これで矢印が出て動くようになります。
<a href="#pagetop" onclick="jumpToPageTop();return false;" onkeypress="jumpToPageTop();return false;">
<img src="<$MTBlogURL$>arrow.gif" border="0" width="14" height="14" alt="トップへ"></a>
</div>
次に、この矢印を出現させる位置を決めなくてはなりません。
layer.jsをエディタで開いて、84、85行目と89、90行目が位置を決める計算式です。
計算の基準値がブラウザのウィンドウ右下が原点になっていることを頭に置いてください。
IE4についての計算式を参考に見ていきます。
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
この状態が原点です。
このとき、「document.body.clientWidth」にはウィンドウサイズが入ります。
ブラウザなんて誰もが違ったウィンドウサイズで見ていますよね？
だから、ここは見ている人によって変化します。
右下に表示ならピクセルで位置を指定します。
pageWidth = document.body.clientWidth -22;
pageHeight = document.body.clientHeight -22;
ウィンドウサイズの常に右下 X軸 -22 Y軸-22の位置に矢印が居座ります。
さて、サイトの中身を画面中央に表示させている場合は、まず自分のサイトの横幅を知りましょう。
小粋空間さんの３カラムレイアウトは、スタイルシートを例にするならば、
.layout-three-column #box {
width: 850px;
この部分がそうですね。てなわけで、うちは850px。
pageWidth = (document.body.clientWidth - 850)/2+828;
pageHeight = document.body.clientHeight - 22;
常に決まった位置に置く場合はこんな計算式になります。
ウィンドウ全体幅からサイト中身の幅を引いて２で割り...
まあ、説明しなくてもわかりますよねｗｗｗ
layer.jsを何度も1px単位で微調整するコトになるかもしれませんが、
がんばってくださ～い。
※他にレイヤータグを使っている場合は使えないコトがあります。
※FireFoxではちゃんとした位置に表示されない様です。
※現在は違うスクリプトを利用しています。(追記:2008/09/03)
コメントする