トップへ戻るボタンにスクロール量を表示する方法

記事に記載したコードは、スキンに追加されています。

完成イメージ

実装方法

以下の手順で実装します。

ラベル
Cocoon設定

表1に示す項目を設定します。

Cocoon設定
設定大項目項目設定値
ボタントップへ戻るボタン設定トップへ戻るボタンを表示するオン
ラベル
CSSを追加（スクロール連動設定）

前述のコードをstyle.cssに追加します。

設定	大項目	項目	設定値
ボタン	トップへ戻るボタン設定	トップへ戻るボタンを表示する	オン

ラベル

CSSを追加（ボタン表示）

以下のコードをstyle.cssに追加します。

/* ボタンに影 */
.go-to-top {
  filter: drop-shadow(rgba(0, 0, 0, 0.5) 1px 1px 2px);
}

/* スクロール量に重ねるマスク画像 */
.go-to-top-button-icon-font {
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMzUyIDUxMiI+PCEtLSEgRm9udCBBd2Vzb21lIEZyZWUgNi40LjIgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgQ29weXJpZ2h0IDIwMjMgRm9udGljb25zLCBJbmMuIC0tPjxwYXRoIGQ9Ik0yMDUuMjIgMjIuMDljLTcuOTQtMjguNzgtNDkuNDQtMzAuMTItNTguNDQgMEMxMDAuMDEgMTc5Ljg1IDAgMjIyLjcyIDAgMzMzLjkxIDAgNDMyLjM1IDc4LjcyIDUxMiAxNzYgNTEyczE3Ni03OS42NSAxNzYtMTc4LjA5YzAtMTExLjc1LTk5Ljc5LTE1My4zNC0xNDYuNzgtMzExLjgyek0xNzYgNDQ4Yy02MS43NSAwLTExMi01MC4yNS0xMTItMTEyIDAtOC44NCA3LjE2LTE2IDE2LTE2czE2IDcuMTYgMTYgMTZjMCA0NC4xMSAzNS44OSA4MCA4MCA4MCA4Ljg0IDAgMTYgNy4xNiAxNiAxNnMtNy4xNiAxNi0xNiAxNnoiLz48L3N2Zz4=');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.go-to-top-button-icon-font span {
  background-color: #00a9e0;
  display: block;
  height: 100%;
  transform-origin: bottom;
  width: 100%;
  scale: 1 var(--per);
}

.go-to-top-button-icon-font span::before {
  content: none;
}

さいごに

今回紹介した方法を使えば、トップへ戻るボタンにスクロール量を表示させることができます。
これにより、ユーザーはページのどの位置にいるかを一目で把握できるようになります。

追加機能

「追加機能」の記事一覧です。本スキンでは、CocoonやWordPress標準のダッシュボードをカスタマイズし、さまざまな機能を追加しています。詳細な設定方法や便利な機能を分かりやすく紹介します。