Webサイトにスムーススクロールを適用させると、ページ内リンクで目的の位置までなめらかに遷移する動きを実現できます。
スムーススクロールを作る方法はいくつかあり、JavaScriptを使った方法はやや難易度が高いものの、この記事で紹介する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タグへ指定するようにしましょう。
ここは結構陥りがちなミスなので、要注意ですね！！
遷移位置を調整する方法
固定ヘッダー（スクロールしても追従してくるヘッダー）を実装しているサイトでは、以下のようにリンク先の遷移位置を調整する必要性が出てくるかもしれません。以下の動画をご覧ください。
この場合だと固定ヘッダーでセクションタイトル（事例では「about」）が隠れてしまいます。これでは、ユーザーが自分の現在地点を把握しづらいかもしれません。ここで使えるのがscroll-margin-topプロパティです。scroll-margin-topを使えばスクロール時のみに適用される余白を付けられます。
.about {
scroll-margin-top: 130px;
}ここではaboutセクションに、ヘッダーの高さ分の130pxを指定しました。このようにタイトルと固定ヘッダーが被らないように調整できます。
ここでは、ヘッダーの高さが130pxの場合を例にしています。実際のヘッダーの高さに応じてscroll-margin-topの値を調整してください。
CSSのみで実装するスムーススクロールではできない2つのこと
CSSでスムーススクロールを実装する方法は非常に簡単ですが、JavaScriptやjQueryを使って実装する方法に比べてできないことが2つあります。
- ページ単位の指定ができない
- スクロール速度の調整ができない
詳しく解説していきます。
ページ単位の指定ができない
CSSでスムーススクロールを実装する場合、ページ単位の指定ができません。
たとえばトップページの他にサービスページやお問い合わせページなど、下層ページが存在するWebサイトがあるとします。ここでトップページのみスムーススクロールを実装し、サービスページとお問い合わせページにはスムーススクロールを適用しないといった、個別の指定はできません。
スクロール速度の調整ができない
CSSで指定するスムーススクロールではスクロール速度の調整ができません。その点、JavaScriptやjQueryではスクロール速度の指定や、スクロール途中の加減速（イージング）も細かく調整できます。
まとめ
本記事で紹介したCSSのみでスムーススクロールを実装する方法は、初心者でも簡単に取り組めるシンプルな内容です。ただしJavaScriptやjQueryでスムーススクロールを実装する方法に比べて、本記事で紹介したCSS のみで作る方法は細かな調整ができない面は押さえておきましょう。
CSSのみでスムーススクロールを実装する際にできないことは以下のとおりです。
- ページ単位の指定ができない
- スクロール速度の調整ができない
これらの調整を必要としなければ、CSSを使ったスムーススクロールで対応できます。ぜひこの記事を参考にして実践してみましょう！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
