<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · BackToTop（普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="BackToTop.css" />
  <style>
    body { margin: 0; background: var(--kole-color-page-bg); font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); }
    .kole-demo-banner { padding: 24px; background: var(--kole-color-card-bg); border-bottom: 1px solid var(--kole-color-border); }
    .kole-demo-banner h2 { margin: 0 0 8px; color: var(--kole-color-text-title); font-size: 18px; }
    .kole-demo-banner p { margin: 0; color: var(--kole-color-text-secondary); font-size: 13px; }
    .kole-demo-spacer { height: 2200px; padding: 24px; color: var(--kole-color-text-secondary); }
  </style>
</head>
<body>
  <div class="kole-demo-banner">
    <h2>向下滚动页面</h2>
    <p>滚动超过 400px 后右下角出现返回顶部按钮，环显示滚动进度，点击平滑回到顶部。</p>
  </div>
  <div class="kole-demo-spacer">这里是长内容占位区……</div>

  <div class="kole-backtop kole-no-ring" id="backtopPlain" role="button" aria-label="返回顶部（无进度环）" style="left:24px;right:auto;display:flex">
    <span class="kole-backtop-arrow" aria-hidden="true">↑</span>
  </div>

  <div class="kole-backtop" id="backtop" role="button" aria-label="返回顶部">
    <svg viewBox="0 0 44 44">
      <circle class="kole-backtop-ring-bg" aria-label="返回顶部" cx="22" cy="22" r="20" fill="none" stroke-width="2" />
      <circle class="kole-backtop-ring-fg" role="button" aria-label="返回顶部" id="ring" cx="22" cy="22" r="20" fill="none" stroke-width="2" />
    </svg>
    <span class="kole-backtop-arrow" aria-label="返回顶部">↑</span>
  </div>

  <script>
    var THRESHOLD = 400, R = 20, C = 2 * Math.PI * R;
    var el = document.getElementById('backtop');
    var ring = document.getElementById('ring');
    ring.style.strokeDasharray = C;
    ring.style.strokeDashoffset = C;

    function onScroll() {
      var st = window.pageYOffset || document.documentElement.scrollTop;
      var max = document.documentElement.scrollHeight - window.innerHeight;
      var p = max > 0 ? st / max : 0;
      el.classList.toggle('is-visible', st > THRESHOLD);
      ring.style.strokeDashoffset = C * (1 - p);
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    el.addEventListener('click', function () {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
    onScroll();
  </script>
</body>
</html>
