【jsを使わない】cssのみでスムーススクロールさせる方法

スムーススクロールを作るときに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でスムーススクロールさせる方法は下記の記事で紹介しています。