Javascript非使用！CSSのみで実装するスムーズにトップへ戻るボタン（scroll-behavior）

CSS HatenaBlog

f:id:ktrw3200:20180821000235j:plain どのブログ、どのホームページの左下を見てみると必ずと言ってもいいほど設置されている「『トップへ戻る』ボタン」。

（↑と言っておいてはなんだが、このブログには設置していない...）

「トップへ戻るボタン」と検索してみると沢山の方が設置方法を紹介されているのですが、今回僕が紹介するのは、主流のやり方とは少し違った方法で「トップへ戻るボタン」を実装してみたいと思います。

特徴

  • Javascript・jQueryを使用せず、CSSを使って実装
  • 正常に動作するブラウザが限られている

検索して上位に出てくるもののほとんどが、「Javascript」もしくは「jQuery」を利用した実装方法ですが、今回はCSSの「scroll-behavior」プロパティを利用した方法で実装します。

残念ながら、Javascript・jQueryを使用したものはほとんどのブラウザで動作するのに対し、「scroll-behavior」プロパティが正常に動作するブラウザが限られており現在（2018年8月20日）では約64%のユーザーが、使用するブラウザでしか動作しません。

jQueryを読み込ませると表示速度が遅くなったりするのが嫌な人にはおすすめです。

各ブラウザの対応状況

  • -
  • 61.0
  • 36.0
  • 48.0
  • -

Chrome53.0以上、Firefox36.0以上、Opera48.0以上で動作しますが、IE及びEdge・Safariは現段階では動作しません。 草案段階（Working Draft）のCSSプロパティですので、現段階で未対応のブラウザも今後サポートされる可能性が高いです。

デモ

以下のリンクからデモが確認できます。

デモページ

デモページ内の左下のボタンを押すとページ上部へスムーズに戻ります。

実装コード

HTMLコード

はてなブログの場合は、ヘッダの「タイトル下」もしくは、「フッタ」に以下のコードを貼り付けてください。

<div class="go-top">
    <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="none" d="M0 0h24v24H0V0z"/>
        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
        </svg>
    </a>
</div>

CSSコード

はてなブログの場合は「デザインCSS」に以下のコードを貼り付けてください。

body{
    scroll-behavior: smooth;
}

.go-top{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100px; //ボタンの横サイズ
    height: 60px; //ボタンの縦サイズ
    text-align: center;
    background: #000; //ボタンの色
}

.go-top a{
    fill: #FFF; //矢印の色
    line-height: 60px;
    display: inline-block;
    width: 100%;
}

.go-top svg{
    padding: 18px 0;
}

CSSコードでボタンサイズ・色をお好みにカスタマイズできます。

コードの解説

「scroll-behavior」

CSSコードの2行目にあるscroll-behaviorによってスムーズなスクロールを実現しています。

また、このプロパティはトップへ戻るボタンだけでなく、記事の目次などのページ内リンクにも有効です。

例として目次に「scroll-behavior」を使用した例を紹介しておきます。

See the Pen Ex.2_SmoothScroll by Puchutech (@puchun) on CodePen.

参考文献

「CSS Object Model (CSSOM) View Module」（英語） https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior

「CSS Object Model (CSSOM) View Module」（和訳） https://triple-underscore.github.io/cssom-view-ja.html#css-properties