HTML/CSS

【CSSのみ!】ページ内をゆっくりスクロールする方法

本記事では、JavaScriptを使わずにHTMLとCSSのみでリンクをクリックするとページ内をゆっくりスクロールする(スムーススクロール)の作り方について解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

本書情報
著者Mana
発売日2019/3/16
ページ数280ページ
Kindle版
レビュー
(Amazon)
(2,167件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

サンプルコード

以降の解説では、下記のサンプルコードを使用します。このサンプルコードは、装飾のみを実装したものでスムーススクロールの実装はしていません。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <ul>
        <li><a href="#section1">Section1</a></li>
        <li><a href="#section2">Section2</a></li>
        <li><a href="#section3">Section3</a></li>
      </ul>
    </header>
    <main>
      <section id="section1"><h2>セクション1</h2></section>
      <section id="section2"><h2>セクション2</h2></section>
      <section id="section3"><h2>セクション3</h2></section>
    </main>
  </body>
</html>
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: gray;
  color: #fff;
  ul {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-left: 20px;
  }
}

section {
  height: 100vh;
}

#section1 {
  margin-top: 100px;
  background-color: aqua;
}

#section2 {
  background-color: burlywood;
}

#section3 {
  background-color: cadetblue;
}

上記のコードはSCSSになります。CSSでコーディングしている方は下記のコードをお使いください。

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: gray;
  color: #fff;
}

header ul {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  padding-left: 20px;
}

section {
  height: 100vh;
}

#section1 {
  margin-top: 100px;
  background-color: aqua;
}

#section2 {
  background-color: burlywood;
}

#section3 {
  background-color: cadetblue;
}

サンプルコードがどのような状態か確認してみます。headerタグの「section3」リンクをクリックすると以下のような状態になります。

サンプルコードの状態

一瞬で#section3に移動するのに加え、headerの高さでセクション内のテキストが隠れてしまっていることが分かります。

これを以降の解説で修正していきましょう。

スムーススクロールを実装する

まず始めに、headerのリンクをクリックした時にゆっくりスクロールするスムーススクロールを実装します。

実装方法はとても簡単で、htmlタグに対し「scroll-behavior: smooth」を設定するだけです。

html {
  scroll-behavior: smooth;
}

これだけで、headerのリンクをクリックした時にスムーススクロールがされるようになります。

headerの高さを考慮する

scroll-behavior: smoothを設定しただけでは、headerの高さで隠れているテキストは表示されません。この問題を解決するには:targetの疑似クラスに対して「scroll-margin-top: 100px」を指定する必要があります。

:target {
  scroll-margin-top: 100px;
}

100pxという値は今回使用しているサンプルコードのheaderの高さになります。この値は各々で調整してください。

これで、headerのリンクをクリックした時にheaderの高さが考慮されセクション内のテキストが表示されるようになります。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村