CSSだけで！スムーススクロールの実装方法

css 2024/02/01

1 デモ
2 HTMLの設定
3 CSSの設定
4 JSを採用した方がいい場合
5 最後に

今回はページ内のリンクをクリックした際に、対象のセクションや要素まで滑らかに移動する効果を持つ、スムーススクロールについてご紹介をします。
しかし、多くの実装がjQueryを使用しています。今回は、初心者の方に向けて、jQueryを使わずにシンプルなスムーススクロールを実装する方法を紹介します。

デモ

各リンクをクリックすると指定した対象先まで滑らかに移動します。

See the Pen scroll-behavior by hide (@hide225) on CodePen.

HTMLの設定

基本的な構造を用意します。今回は、グローバルメニューとTOPボタンを用意しています。
お好きなようにカスタマイズしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scroll behavior</title>
</head>
<bod>
  <header>
    <div class="inner">
      <nav>
        <ul>
          <li>
            <a href="#sec-1">セクション１</a>
          </li>
          <li>
            <a href="#sec-2">セクション2</a>
          </li>
          <li>
            <a href="#sec-3">セクション3</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <section id="sec-1">
    <p>セクション１</p>
  </section>
  <section id="sec-2">
    <p>セクション2</p>
  </section>
  <section id="sec-3">
    <p>セクション3</p>
  </section>
  
  <a class="pageTop" href="#">ページトップ</a>
</body>
</html>

CSSの設定

ここでは、「scroll-behavior」プロパティを使用しています。

scroll-behavior: auto; //初期値
scroll-behavior: smooth;

‘smooth’を指定することでスムーススクロールを実装できます。

html {
  scroll-behavior: smooth;
}

header {
  background-color: #333;
  padding: 10px;
}

header ul {
  list-style: none;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

header li a{
  color: #fff;
  text-decoration: none;
  transition: opacity ease .3s;
}

header li a:hover{
  opacity: .6;
}

section {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background-color: #efefef;
}

section:nth-of-type(2) {
  background-color: #fff;
}

.pageTop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  color: #1881b7;
}

これで簡単に実装することができました。
以下、環境によっては、JSを採用しなければならない為、ご紹介します。