Webサイトにスムーススクロールを実装すると、ページ内リンクで目的の位置までなめらかに遷移します。スムーススクロールは基本的にjQueryやJavaScriptで実装するため、初心者の方は実装に困難します。
しかし、スムーススクロールはCSSだけで簡単に実装できます。ただし、JavaScriptでスムーススクロールを実装する場合と比べると細かな設定ができません。
この記事ではスムーススクロールをCSSのみで実装する方法と、CSSのみではできないことについて解説します。最後までお読みいただきますと、欠点を押さえたうえでCSSのみでスムーススクロールを実装する方法が理解できます。
- CSSのみでスムーススクロールを実装する方法
- CSSのみでスムーススクロールを実装する場合にできないこと
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
スムーススクロールとは？
スムーススクロールの挙動を動画で確認してみましょう。
スムーススクロールを実装すると、ページ内リンクにおいて目的のポイントまで滑らかな挙動で遷移します。
スムーススクロールをCSSで実装する方法を解説
CSSでスムーススクロールを実装する方法は非常に簡単です。htmlタグにscroll-behavior: smooth;を指定すれば実装できます。
html {
scroll-behavior: smooth;
}これだけでスムーススクロールは実装完了ですが、ひとつ注意点があります。
htmlタグではなくbodyタグにscroll-behavior: smooth;を指定してしまうと、スムーススクロールが効きません。CSSでスムーススクロールを指定する場合は、必ずhtmlタグへ指定するようにしましょう。
CSSのみで実装するスムーススクロールではできない3つのこと
CSSでスムーススクロールを実装する方法は非常に簡単ですが、JavaScriptやjQueryを使って実装する方法と比較してできないことが3点あります。
- ページ単位の指定ができない
- スクロール速度の調整ができない
- リンク先の遷移位置を調整できない
詳しく解説していきます。
ページ単位の指定ができない
CSSでスムーススクロールを実装する場合、ページ単位の指定ができません。
たとえばトップページの他にサービスページやお問い合わせページなど、下層ページが存在するWebサイトがあるとします。ここでトップページのみスムーススクロールを実装し、サービスページとお問い合わせページにはスムーススクロールを適用しないといった、個別の指定はできません。
全ページにスムーススクロールが効いて構わないのであれば、CSSを使ったスムーススクロールで対応できます。
スクロール速度の調整ができない
CSSで指定するスムーススクロールではスクロール速度の調整ができません。
一方、JavaScriptやjQueryではスクロール速度の指定や、スクロール途中の加減速（イージング）も細かく調整できます。
リンク先の遷移位置を調整できない
scroll-beheivorプロパティはリンク先の遷移位置を調整できません。
たとえば固定ヘッダー（スクロールしても追従してくるヘッダー）を実装しているサイトでは、リンク先の遷移位置を調整したい場合があります。
この場合だと固定ヘッダーでセクションタイトル（画像ではabout）がかくれてしまうので、遷移位置を少し上に調整したい場合があるでしょう。しかし、scroll-behaviorで遷移位置の調整はできません。一方、JavaScriptやjQueryでは遷移位置を自由に調整できます。
なおセクションタイトルにpadding-topを指定して上方向に余白を設ければ、CSSのみでもタイトルと固定ヘッダーが被らないように調整はできます。
まとめ
この記事ではCSSのみでスムーススクロールを実装する方法を解説しました。JavaScriptやjQueryでスムーススクロールを実装する方法と比較し、CSS のみで作るスムーススクロールは細かな調整ができない面があります。
CSSのみでスムーススクロールを実装する際にできないことは以下のとおりです。
- ページ単位の指定ができない
- スクロール速度の調整ができない
- リンク先の遷移位置を調整できない
しかしとても簡単なコードのみでスムーススクロールを実装できるため、調整の必要がない箇所では積極的に使用してみましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
