ページ内リンクをスムーススクロール (CSS ver.)

ページ内の指定した場所に突然移動するのではなく、滑らかに移動するスムーススクロール。だいたい何処のサイトでも実装してますよね。けど最初からそうなってるわけじゃない、何かを書いてその為の処理をさせないといけない。

ということでjQueryを使ってこのスムーススクロールの処理を書こうとしたのですが、今はJavaScriptを使わずCSSだけでできるという話を見たことがあるなと思い出し、まずは先にCSSだけで再現できるver.を書いてみようと思います。

しかし、このスムーススクロールって必ずあったほうがいいってわけでもない気がします。けどブラウザに負荷がすごくかかるわけでないのなら、あったほうが動きが気持ちいいし「同じページ内を移動してますよ」というのがわかりやすいかな。

■ 出来上がったスムーススクロールの例

CodePenで開く
コードの内容は見やすいようにこの記事の一番下にも全て書いてあります。

動作例

上記は画像はChromeで録画した内容です。上に張り付けたコードの通りJavaScriptが一行も書かれてない状態でもきちんと動作してます。

■ 必要なコードは「scroll-behavior: smooth;」

上記のコードでは例文やスタイリングのためにHTML/CSSに色々書かれていますが、スムーススクロールに直接必要なコードは

html {
 scroll-behavior: smooth;
}

のみです。これを要素型セレクターのhtmlに書いて普段通りaタグに#付きで移動したい場所のidを記入すれば終わりです。

MDNによる詳細
: scroll-behavior - CSS: カスケーディングスタイルシート | MDN

htmlに書く以外の要素やclassに書いて動かすパターンもあるみたいですが少々複雑なようです。
参考URL
: scroll-behaviorがうまく動かなかったことと分かってなかったこと – Hitorigoto

そのようにしなければならないパターンに出会ったらその時に調べたり、上のブログを参考にしてしばらくはページ全体に対応のパターンだけを覚えていていればいいかなと思います。

■ 対応ブラウザについて (もちろんIEは対応してない)

注意 : 2020年06月04日 時点での対応ブラウザです

対応ブラウザは手っ取り早くCan I Use...で確認しましょう

PCではChromeとFirefox、モバイルではChrome for Androidが対応しています。

EdgeはChromium版に変わったバージョン79から対応になっているので、アップデートされてない昔のEdgeHTMLエンジンの状態だとスムーススクロールにはなりません。本来、すでに自動アップデートされてちゃんとみんなのEdgeブラウザがChromium版になっていた予定だったのですが例のウイルスの影響で自動アップデートが延期になってます。

またSafariはデスクトップもモバイルも対応していません。(いつか対応するのだろうか？)

■ JavaScriptを使い実装する場合との違い

CSSのみを使う場合とJavaScriptを使ったの場合の違いを考えると、CSSはスムーススクロール状態をOnにするということのみの機能しかないので「スクロールのスピードを調整したい」という場合はやはりJavaScriptを使ったほうがいいのかなと思います。
更にスクロールと同時に要素の表示を増やしたり減らしたりと他の効果も追加する場合もJavaScriptを使った場合は一緒に処理を書けるのでわざわざCSSのみにこだわらなくてもいいのかな。

逆にそんなのはいらない。シンプルにスムーススクロールしてくれればそれでいい！という場合はこのCSSを一行書くだけで十分な気がします。
ただし、上にも書いた通り旧EdgeやIE、Safariには対応してないので全部対応しないと！となると結局JavaScriptを書かないと…

ということで実際にJavaScriptで書いた場合との違いを実感するために今度はjQueryを使って書くパターンの記事を書きたいと思います。

■ CodePenに記載したコード

<h1>スムーススクロールテスト</h1>

<section id="sec_toc">
 <h2>目次</h2>
 <ol>
   <li><a href="#sec_main-img">大きな画像があります</a></li>
   <li><a href="#sec_main-text">長い文章があります</a></li>
 </ol>
</section>

<section id="sec_main-img">
 <h3>大きな画像があります</h3>
 <img class="main-img" src="https://images.unsplash.com/photo-1587317822486-9ab2de18fa23?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
 <p>
   <a href="#sec_toc">目次に戻る</a>
 </p>
</section>

<section id="sec_main-text">
 <h3>長い文章があります</h3>
 <p>無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。無駄に長い文章。他</p>
 <p>
   <a href="#sec_toc">目次に戻る</a>
 </p>
</section>

<div class="totop">
 <a href="#">ページトップへ</a>
</div>

/* Reset */

html {
 line-height: 1;
 box-sizing: border-box;
}

*, ::before, ::after {
 box-sizing: inherit;
}

h1, ol, ul, p {
 line-height: 1.75;
}

img {
 vertical-align: top;
}

/* Style */

body {
 max-width: 960px;
 margin: 0 auto 44px;
 padding: 10px;
}

section {
 overflow: hidden; /* h2,h3などのmarginを貫通させないため */
}

.main-img {
 width: 100%;
}

.totop {
 position: fixed;
 bottom: 44px;
 right: 0;
 background-color: rgba(255,255,255,.8);
 padding: 10px;
}

/* Main CSS */

html {
 scroll-behavior: smooth;
}