HTML
CSS
JavaScript
備忘録
初心者エンジニア

備忘録:固定ヘッダー有りの時のアンカーリンク

今日(2019/04/15)の気になったこと

備忘録として。


作業時の状況


  • あらかじめ用意されたコンポーネントを組み合わせてページを作成する業務

  • aタグに#が指定されているものをスクロールさせるjsが組み込み済み

  • アンカーリンクのtarget用のクラス*が用意されている

アンカーリンク用のクラスが用意されていたのに気付かずhtmlをくんでいて、アンカーリンクの位置がヘッダー分ずれていることに気づいた。

*クラスを付与すると、ネガティブマージンとそれと同じpaddingが付与される仕組み。

margin-top:-120px;

padding-top:120px;



もともとのスタイルが崩れてしまうため、空div(もしくはsection,articleなど)を追加する必要がある。

htmlの構造としてよくないのではと思ったが、jsで高さ分移動位置をずらすのは面倒なのだろうか。。

個人的にネガティブマージンは好きじゃないから、私としてはjsの方がいいと思うけどな。

明日コンポーネント作成者に理由を聞いてみます。


お知らせ


  1. web情報発信収集等のtwitter始めました:point_right:@YusaTech


  2. Inside Frontend #3参加します:fire:


今日の作業用BGM

ゆるふわギャング "Dippin' Shake"

https://youtu.be/bARY2QkVLv4

今更聴き始めたけどめちゃかっこいいし作業も捗る:notes: