スムーススクロールを作るときにjQueryやjavascriptを使う場合が多いと思います。
ですがcssだけでもスムーススクロールを作ることができます。
cssのみでスムーススクロールさせる方法
cssでスムーススクロールを再現させるには下記のスタイルを指定します。
html{scroll-behavior: smooth;}
html
<nav>
<ul>
<li><a href="#contents1">コンテンツ1</a></li>
<li><a href="#contents2">コンテンツ2</a></li>
<li><a href="#contents3">コンテンツ3</a></li>
</ul>
</nav>
<div class="wrap">
<div id="contents1" class="box1">コンテンツ1</div>
<div id="contents2" class="box2">コンテンツ2</div>
<div id="contents3" class="box3">コンテンツ3</div>
</div>
css
html{scroll-behavior: smooth;}
nav ul{
display: flex;
justify-content: center;
}
nav ul li{
display: flex;
margin: 0 5px;
}
nav ul li a{
color: #000;
display: flex;
padding: 20px;
border: solid 1px #6495ed;
text-decoration: none;
}
body{margin: 0;}
.box1,
.box2,
.box3{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 5em;
}
.box1{background: #4169e1;}
.box2{background: #3cb371;}
.box3{background: #f4a460;}
サンプル
細かい指定ができない
cssでスムーススクロールを作るのは簡単ですがデメリットもあります。
それは細かい指定ができない点です。
cssだと残念ながらイージングの指定できません。
問題点としては下記になります。
- イージングの指定ができない
- スピードがブラウザによって異なる
- 未対応のブラウザがある
- すべてのページでスムーススクロールになってしまう
jQueryで対応
もし細かい設定をしたいのであればjQueryやjavascriptで対応しましょう。
プラフグインを使うのも手です。
jQueryでスムーススクロールさせる方法は下記の記事で紹介しています。
参考の記事:【jQuery】プラグインを使わずにスムーススクロールさせる方法
コメント