今までの流れで、何となくスムーススクロールやアンカーリンク時の固定ヘッダーのずれをjsなどで処理していませんか？
実はCSSのみで対応できるようになっています。
主要なブラウザには対応していて、なおかつ簡単にできるので、ぜひ使っていきましょう。
CSSだけでスムーススクロールをする
まずはcssだけでスムーススクロールをする方法についてご紹介します。といっても1行書くだけです。
|
1 2 3 |
html { scroll-behavior: smooth; } |
このようにhtml要素に対してscroll-behavior: smooth;と指定するだけです。
実際のイメージ
See the Pen
Untitled by kkdd (@kk8kk)
on CodePen.
CSSだけでアンカーリンク時の固定ヘッダーのずれを調整する
固定（fixed）させたヘッダーがついている状態でアンカーリンクさせると、ターゲットがヘッダーが被ってしまう…ということはつきものですね。
これもjsなどで位置をずらすための処理していましたがcssでも対応してくれるようになっています。先ほどと同じように、htmlに対して1行記述するだけです。
|
1 2 3 |
html { scroll-padding-top: 100px; } |
scroll-padding-topというプロパティを使用します。
ここでずらしたい分の値を指定します。今回はpxですがemや%などほかの単位にも対応しています。
このプロパティの個人的に良いと思うところはjs等と異なりレスポンシブ時の調整が楽という面です。
以下のように書いておけば、PCとスマートフォンなどに対して、簡単にヘッダーのずれ分の値振り分けできます。
|
1 2 3 4 5 6 7 8 9 10 |
@media only screen and (min-width:751px) { /* for PC */ html { scroll-padding-top: 100px; } } @media only screen and (max-width:750px) { /* for SP */ html { scroll-padding-top: 50px; } } |
実際のイメージ
ヘッダーが80pxなので、100px分ずらすようにしてみました。
See the Pen
ヘッダーずれ分 by kkdd (@kk8kk)
on CodePen.
最近はjsで行っていた処理をcssのみでカバーできることが多いので、どんどん使っていきたいですね。
