CSSでページ内移動を調整

こんにちは、こんばんは、AKデザインの円盤です。

本日は<a>タグなどで飛んだ先のページで、<a name=”#hogehoge”></a>などで飛んだ際のスクロール位置の調整のお話です。

CSSでやっていきます。

 

ネガティブマージンを設定する

では実際にページ内リンクを設置してみます。

こういう画像があって、高さ600pxの画像があったとします。

この真ん中の高さ300pxのところに移動させたいとします。

 

・HTML(押すボタン)

<a href=”index.html#hoge1″>ボタン</a>

 

・HTML(飛んだ先のページのリンク)

<a name=”#hoge1″ class=”anchor”></a>

・CSS

a.anchor {
display: block;
padding-top: 60px;
margin-top: -60px;
}

 

これで調整可能です。

単位はremでもpxでも指定できます。

やろうと思えば、マージンとパディングの「-top」を「-left」とか「-right」にしたら横スクロールにも対応できそう。

 

そして、飛んだ先の<a name class=”anchor”>に追加して、下記のホバーしても背景が見えなくなるようにしておけばバッチリですね。

a.hover_nasi:hover {
background-color: transparent;
}

これ入れとけば、nameの部分だけ透明になってお客さんにはわかりません!

(これ忘れると表示確認中にいきなり謎のhover範囲が色変わって出てきてびっくり!)

 

これで飛んだ先の縦位置は自由自在に制御できそうですね!

ではまた!