もはや実装していないサイトがないくらいによく使われているアンカーリンクのスムーズスクロール。実装するにはjsを用いるのが一般的ですが、cssだけでも実装する方法があるようです。
ただし、今の所この機能を実装しているのはChromeとFirefoxのみなので実務では使えないと思いますが、実用的なだけに今後ほかのブラウザでの実装も期待していです。
基本的な使い方
特に難しい記述はありません。
<a href="#content">アンカーリンク</a> <div class="wrap"> <section id="content">コンテンツ</section> </div>
アンカーリンクを機能させたいエリアをラップしている要素に対してscroll-behaviorを指定するだけです。
.wrap{
scroll-behavior: smooth;
}
イージングなどはかけられないので動きにこだわるサイトには向かないですが、非常に便利なのでいずれはブラウザに組み込まれると良いですね〜。
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)
