ページ内リンクの表示がずれる！→ メニューの固定が原因かも

SIRIUSでやっていたときのように、

普通にページ内リンクを設定してクリックしてみると、

表示が随分下の方にずれてしまい、

なんでこうなっちゃうのかなぁと思っていました。

 

調べてみると、原因は、メニューを固定（追従）にしていたことにあったんですね。

メニューのpixel幅分、リンク先の位置も下にずらさないといけないようです。

 

JQueryを使ってやる方法もあるみたいだけれど、なんだかそちらの方は面倒くさそうです。

そこでとったのが、CSSを使った対処法。

 

 

 

 

いくつかのサイトを見たのですが、どのサイトでも、

「padding-top」と「margin-top」で数値がプラマイゼロ

になるような形で記載しているんですよね。

 

padding-topのみ記載すると、この場合120px分表示を押し下げて表示され、

空間が空いた表示になってしまうことはわかりましたが、

どうしてmargin-top120pxと指定して元に戻ってしまわないのかなぁ

と理由がよくわかりませんでした。

 

どのサイトを見てもこういった記述になる説明は書いてないんですよね。

 

そのままだと、実際の表示自体にスペースができてしまうので、

marginで空いた分を戻すということ？

と無理やり理解しようとしましたが、無理でした。

 

 

いくつもいくつも調べていくうちに、一応原理が書かれたサイトが見つかりました。

原理的には、ページ内ジャンプというのは、どうやらブロックレベル要素の上部が基準になっているらしく、padding-top でブロックを大きくしてやって、ページ内ジャンプの位置を見かけ上、下の方に移動してやって、でも、通常の表示だと隙間が大きくなるので margin-top でまた戻してやる、ということのようですが、正確なところはよくわかりませんし、もしかしたら、うまくいかないケースもあるのかもしれませんが、そのあたりは未検証です。

ページ内ジャンプのずれを CSS で補正する方法についての考察より

 

なんとなく考え方は合っていたようですが、

ブロックレベル等もあんまり理解できていないので、

ちょっと今の私には難しすぎでした。

 

たかがページ内リンク。されどページ内リンク。

奥が深いです。