はじめに
スムーススクロールは、同じページ内を滑らかに移動させる機能のことです。
何か項目をクリックすると、画面がぬるっと動くWebサイトをよく見かけると思いますが、あの動きを実現するためのものです。
サイトに動きをつける際、個人的にこれまでは主にJavaScriptを使っていたのですが、スムーススクロールはHTML/CSSだけで実装できると知ったので、実際に試してみました。
ソースコード・動作
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Scroll</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box top" id="top">
<span class="text">Top</span>
<ul class="list">
<li>
<a class="link" href="#first">
<span class="text">To First</span>
</a>
</li>
<li>
<a class="link" href="#second">
<span class="text">To Second</span>
</a>
</li>
<li>
<a class="link" href="#third">
<span class="text">To Third</span>
</a>
</li>
</ul>
</div>
<div class="scroll-container">
<div class="box first" id="first">
<span class="text">First</span>
<a class="link" href="#second">
<span class="text next">Next</span>
</a>
</div>
<div class="box second" id="second">
<a class="link" href="#first">
<span class="text previous">Previous</span>
</a>
<span class="text">Second</span>
<a class="link" href="#third">
<span class="text next">Next</span>
</a>
</div>
<div class="box third" id="third">
<a class="link" href="#second">
<span class="text previous">Previous</span>
</a>
<span class="text">Third</span>
</div>
<a class="link scrollToTop" href="#top">
<span class="text">Topに戻る</span>
</a>
</div>
</body>
</html>
style.css
/* スムーススクロールの実装 */
html {
scroll-behavior: smooth;
}
/* スクロールの動きを分かりやすくするための実装 */
.box {
height: 900px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.first {
background-color: pink;
}
.second {
background-color: skyblue;
}
.third {
background-color: lightgreen;
}
.list {
margin-left: 30px;
list-style: none;
}
.text {
font-size: 50px;
color: black;
text-decoration: none;
}
.text.previous {
position: absolute;
left: 30px;
}
.text.next {
position: absolute;
right: 30px;
}
.link {
text-decoration: none;
}
.link .text:hover {
color: gray;
text-decoration: underline;
}
/* Topに戻る用のリンクを画面右下に固定 */
.scrollToTop {
position: fixed;
right: 30px;
bottom: 30px;
}
↓↓↓少しテキストが小さくなりますが、「0.25×」サイズが動きを確認しやすいです。↓↓↓
See the Pen
Untitled by pk_bb (@pk_bb)
on CodePen.
解説
HTML
aタグのhref属性にスクロール先の要素のidを指定します。
該当箇所をクリックすると、指定したidの要素まで移動するようになります（この時点ではスクロールは機能しない）。
今回は単なるテキストですが、ボタンのデザインを加えれば、より視覚的に分かりやすくなるはずです。
CSS
今回はページ全体にかかるスクロールなので、htmlに対してscroll-behavior: smooth;を適用しています。
これだけでぬるっと動くスムーススクロールが実現可能です！
簡単ですね！
その他の各要素の配置・配色等はお好みで。
注意点
対応ブラウザ
今回の実装内容は、現時点でIEとSafari系は対応していないのでご注意ください（詳細はCan I Use）。
スクロールの制御
スクロールの動きを細かく制御したい場合は、CSSだけでは対応できないです。
スクロールの速さを調整したい
スクロール先の位置を細かく指定したい
上記のようなことを実現する場合は、JavaScriptでの実装が必要です。
まとめ
スムーススクロールは今どきのWebサイトには大抵実装されていると思いますが、ユーザーの使いやすさを考慮すると取り入れて損はないので、ぜひ試してみて下さい！
少しでも参考になりましたら幸いです！
参考情報
↧