CSSのscroll-behaviorプロパティを使ってスムーススクロールを実装する方法
「CSSだけでもスムーススクロールって実装できるのかな?」
「CSSを使ってスムーススクロールを実装する方法について知りたい!」
上記のように考えている方に向けて、CSSのscroll-behaviorプロパティを使ってスムーススクロールを実装する方法について解説していきます。
- スムーススクロールについて
- スムーススクロールの実装方法
以上の項目について解説します。
この記事を読むことで、CSSを使ってスムーススクロールを実装する仕組みについて理解できるので、ぜひチェックしてみてくださいね!
CSSで実装できるスムーススクロールとは
Webサイトを見るとき、冒頭にある目次の項目をクリックすると、その項目に移動する動きをよく目にするのではないでしょうか。
スムーススクロールとは、Webページ内で連動しているリンクと、リンク先の動きを滑らかにする機能のことです。
スムーススクロールを実装することで、ページをスクロールしながらリンク先の項目までたどり着くので、ページのボリュームを把握できます。
scroll-behaviorを使ってスムースすクロールを実装する方法
scroll-behaviorとは、スクロールが実行されたときの処理を設定できるCSSプロパティで、指定できる値は2種類あります。
- auto:リンク先まで瞬時に移動する。scroll-behaviorの初期値。
- smooth:リンク先まで滑らかにスクロールする
スムーススクロールを実装するには、リンク先まで滑らかにスクロールするsmooth値を指定します。
サンプルコード
<style>
html {
scroll-behavior: smooth;
}
#test1{
height:500px;
background-color: cadetblue;
}
#test2{
height:500px;
background-color: rgb(160, 99, 95);
}
#test3{
height:500px;
background-color: rgb(160, 95, 114);
}
</style>
<ul>
<li><a href="#test1">1</a></li>
<li><a href="#test2">2</a></li>
<li><a href="#test3">3</a></li>
</ul>
<div class="scroll-box">
<section id="test1">
<h2>テスト1</h2>
</section>
<section id="test2">
<h2>テスト2</h2>
</section>
<section id="test3">
<h2>テスト3</h2>
</section>
</div>
HTMLタグを指定し、scroll-behavior:scroll;を一行入力するだけでスムーススクロールを実装できます。
CSS1行で簡単にスムーススクロールを実装できる
今回は、CSSを使ってスムーススクロールを実装する方法について解説してきましたが、いかがでしたでしょうか?
以前はjQueryを使って実装することが多かったスムーススクロールですが、CSSのscroll-behaviorプロパティを使うことで簡単に実装できるのです。
中には、scroll-behaviorに対応していないブラウザもあるので、その点を理解して使ってみてくださいね!
\プログラミングスクールを比較/
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
---|---|---|---|
目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
分割払い | ○ | ○ | ○ |
補助金 | ○ | × | ○ |
転職保証 | ○ | × | × |
受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間(約9カ月)のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
公式HP |
公式HP |
公式HP |