「HTML」と「CSS」のみで実装する　ページトップへ戻るボタンの設置　

最近のウェブサイトでは、スマートフォンでの表示のように、縦に長いコンテンツになることが当たり前になっていますよね。ユーザービリティを考えると、このページトップへ戻るボタンを設置することが必須ではないでしょうか。

今回は、CSSのscroll-behaviorプロパティを使用した、HTMLとCSSので実装するシンプルな基本テクニックをご紹介します。

HTMLのマークアップ

まず、HTMLを見ていきましょう。

body要素内に、リンク要素（<a>）で設置します。設置場所は、通常ですとfooter要素の下あたりになるでしょうか。

ページ内リンクの方法で移動を行いますので、hrefに#topを設定します。

<a href="#top" id="topButton">トップへ</a>

そして、ページの一番上に戻るためのアンカーポイントを作成しておきます。header要素などに、id="top"を指定します。

<header id="top"></header>

CSSでスタイリング

次にCSSでボタンをスタイリングしていきます。

#topButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

#topButton:hover {
  background-color: #555;
}

scroll-behaviorプロパティでスムーズスクロール

これだけでも、機能的にはページトップへ移動しますが、一瞬で移動してしまうためトップ部分へ戻ったのかが、わかりづらいです。そこで、スムーズスクロール（スクロールアニメーション）を機能を設定していきます。

Javascriptで設定することもできますが、今回は簡単にCSSのscroll-behaviorプロパティを使用して設定します。

html{
  scroll-behavior: smooth;
}

コードサンプル

See the Pen pagetop-buttom01 by web-basic-archive (@web-basic-archive) on CodePen.

今回のコードでは、一番基本的なボタン設置の方法をお伝えしました。CSSのみなので、ボタンが最初から表示されている状態となっています。ある程度スクロールしたのちに表示されるには、jQueryなどJavascriptでの制御が必要となります。次回の実用編でご紹介していきたいと思います。

参考にしたサイト

scroll-behaviorプロパティでスムーススクロール！jQueryを使わずcssだけで実装！

Follow me!

@webbasicarchive