【Cocoonカスタマイズ】トップへ戻るボタンにスクロール量を表示する方法

はじめに

トップへ戻るボタンに、ページのスクロール量を表示を追加します。

この記事では、この方法について説明します。

完成イメージ

実装手順

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

ラベル
Cocoon設定

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

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

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

ラベル

JavaScriptを追加

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  $(window).on('load scroll', function () {
    // 現在のスクロール量を取得
    var scroll = $(window).scrollTop();

    // ページの総スクロール可能量（ドキュメント全体の高さからウィンドウの高さを引いた値）を算出
    var height = $(document).height() - $(window).height();

    // スクロール進捗率（%）を計算
    var progress = scroll / height * 100;

    // 算出した進捗率を設定
    $('.go-to-top-button').css('--per', progress + '%');
  });
});

ラベル

CSSを追加

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

.go-to-top-button {
  background-color: transparent;

  &::before {
    --my-color: #eee;       /* プログレス色 */
    --my-progress: #ff0000; /* スクロール量色 */

    background-image: conic-gradient(
      var(--my-progress) var(--per),
      var(--my-progress) var(--per),
      var(--my-color) var(--per),
      var(--my-color) 100%
    );
    border-radius: 100%;
    content: '';
    display: block;
    height: 100%;
    mask: radial-gradient(circle, transparent 50%, #000 54%);
    position: absolute;
    width: 100%;
  }
}