今までの流れで、何となくスムーススクロールやアンカーリンク時の固定ヘッダーのずれをjsなどで処理していませんか？
実はCSSのみで対応できるようになっています。

主要なブラウザには対応していて、なおかつ簡単にできるので、ぜひ使っていきましょう。

CSSだけでスムーススクロールをする

まずはcssだけでスムーススクロールをする方法についてご紹介します。
といっても1行書くだけです。

このようにhtml要素に対してscroll-behavior: smooth;と指定するだけです。

実際のイメージ

See the Pen
Untitled by kkdd (@kk8kk)
on CodePen.

CSSだけでアンカーリンク時の固定ヘッダーのずれを調整する

固定（fixed）させたヘッダーがついている状態でアンカーリンクさせると、ターゲットがヘッダーが被ってしまう…ということはつきものですね。
これもjsなどで位置をずらすための処理していましたがcssでも対応してくれるようになっています。
先ほどと同じように、htmlに対して1行記述するだけです。


scroll-padding-topというプロパティを使用します。
ここでずらしたい分の値を指定します。今回はpxですがemや%などほかの単位にも対応しています。

このプロパティの個人的に良いと思うところはjs等と異なりレスポンシブ時の調整が楽という面です。
以下のように書いておけば、PCとスマートフォンなどに対して、簡単にヘッダーのずれ分の値振り分けできます。

実際のイメージ

ヘッダーが80pxなので、100px分ずらすようにしてみました。

See the Pen
ヘッダーずれ分 by kkdd (@kk8kk)
on CodePen.

最近はjsで行っていた処理をcssのみでカバーできることが多いので、どんどん使っていきたいですね。