こんにちは、こんばんは、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範囲が色変わって出てきてびっくり！）
これで飛んだ先の縦位置は自由自在に制御できそうですね！
ではまた！
