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

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

以下のコードを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 + '%');
  });
});

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

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

.go-to-top-button: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%;
}

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

以下のコードをtmp-user/main-before.phpに追加します。

<div class="go-top-wrap">
  <svg class="go-to-circle" width="50px" height="50px" viewBox="-5 -5 100 100">
    <path d="M 45,0 A 45 45 0 1 1 44,0 z"/>
  </svg>
</div>

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

jQuery(function($) {
  var offset = 50;
  var duration = 550;

  // style設定
  var progressPath = document.querySelector('.go-top-wrap path');
  var pathLength = progressPath.getTotalLength();
  progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
  progressPath.style.strokeDashoffset = pathLength;
  progressPath.style.transition = 'stroke-dashoffset 10ms linear';

  // スクロール位取得
  function updateProgress() {
    var scroll = $(window).scrollTop();
    var height = $(document).height() - $(window).height();
    var progress = pathLength - (scroll * pathLength / height);
    progressPath.style.strokeDashoffset = progress;
  }
    
  $(window).on('load scroll', function() {
    updateProgress();

    if ($(this).scrollTop() > offset) {
      $('.go-top-wrap').addClass('active');
    } else {
      $('.go-top-wrap').removeClass('active');
    }
  });

  // ボタンクリックの場合
  $('.go-top-wrap').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, duration);
    return false;
  });
});

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

.go-top-wrap path {
  fill: none;
}

/* 外枠 */
.go-top-wrap {
  border-radius: 50%;
  bottom: 25px;
  box-shadow: inset 0 0 0 5px #ccc;
  cursor: pointer;
  display: block;
  height: 50px;
  opacity: 0;
  position: fixed;
  right: 50px;
  transform: translateY(15px);
  transition: all 200ms linear;
  visibility: hidden;
  width: 50px;
  z-index: 9999;
}

/* 表示 */
.go-top-wrap.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* 矢印 */
.go-top-wrap:before {
  color: #333;
  content: '\f062';
  display: block;
  font-family: 'Font Awesome 5 Free';
  font-size: 24px;
  font-weight: 900;
  left: 0;
  line-height: 50px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 50px;
  z-index: 2;
}

/* スクロール量 */
.go-top-wrap path {
  box-sizing: border-box;
  stroke: #333;
  stroke-width: 10px;
}

/* マウスオーバー矢印アニメーション */
.go-top-wrap:hover:before {
  animation-duration: 0.75s;
  animation-name: hvr-icon-up;
  animation-timing-function: ease-out;
}

@keyframes hvr-icon-up {
  0%, 50%, 100% {
    transform: translateY(0);
  }
  25%, 75% {
    transform: translateY(-8px);
  }
}

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

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

/* ブラウザがanimation-timelineサポートしているなら有効 */
@supports (animation-timeline: scroll()) {
  /* ボタンに影 */
  .go-to-top {
    filter: drop-shadow(rgba(0, 0, 0, 0.5) 1px 1px 2px);
  }

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

  /* スクロールに応じアニメーション */
  .go-to-top-button-icon-font span {
    animation: progress linear;
    animation-timeline: scroll();
    background-color: #00a9e0;
    display: block;
    height: 100%;
    transform-origin: bottom;
    width: 100%;
  }

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

  @keyframes progress {
    from {
      scale: 1 0;
    }
    to {
      scale: 1 1;
    }
  }
}