上に戻る
fixed

右に貼り付けている「上に戻る」のボタンがずーっとついてきます。

スクロールしてもずーっと同じ位置にいます。

 

スクロールして確認してみてください。

 

この例のように画面の右端に貼り付けたいのであれば、

 

<body>タグの直下に<div>を作成し、その中に「TOP(アンカーポイント名)」に戻るリンクを持った画像を配置しておきます。(例:#top)

 

たとえば<div>のID名が「#backtop」なら

 

#bucktop {
  width:DIVの横幅x;
  height:DIVの高さ;
  position:fixed;
  z-index:1;
  top: 50px;
  right: 0px;
}

 

上記でいけます。

 

キモは「position:fixed」と「right:0px」です。

 

「position:fixed」これが、「absolute」と同じく、positionプロパティを持った親の中に絶対的に決めた座標位置に要素を配置するプロパティなのですが、「absolute」と違うのが、スクロールしても、最初に決めた座標から動かない、という点があります。

 

「top: 50px;right: 0px;」これが「上から50px」「右から0px」つまり右端に配置している部分です。

左端につけたい場合は「left:0px」をつけたらいけます。

 

どこ?という方は、右クリック等でソースをのぞいてみてください。
10行目~20行目にCSSのソース

 

30行目にHTMLのソースを記載しています。

 

なお、この「fixed」のpositionの値を設定しているときは、デザインビューが若干乱れた見栄えになることがありますが、ライブビューではきちんと治りますので、あわてず、強い心を持ってください・

 

お試しあれ。

 

 

inserted by FC2 system