{
 "slug": "backtotop",
 "mode": "single",
 "examples": [
  {
   "id": "backtotop-ex-1",
   "title": "这里是长内容占位区……",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"kole-demo-banner\">\n  <h2>向下滚动页面</h2>\n  <p>滚动超过 400px 后右下角出现返回顶部按钮，环显示滚动进度，点击平滑回到顶部。</p>\n</div>\n<div class=\"kole-demo-spacer\">这里是长内容占位区……</div>\n<div class=\"kole-backtop kole-no-ring\" id=\"backtopPlain\" role=\"button\" aria-label=\"返回顶部（无进度环）\" style=\"left:24px;right:auto;display:flex\">\n  <span class=\"kole-backtop-arrow\" aria-hidden=\"true\">↑</span>\n</div>\n<div class=\"kole-backtop\" id=\"backtop\" role=\"button\" aria-label=\"返回顶部\">\n  <svg viewBox=\"0 0 44 44\">\n    <circle class=\"kole-backtop-ring-bg\" aria-label=\"返回顶部\" cx=\"22\" cy=\"22\" fill=\"none\" r=\"20\" stroke-width=\"2\"></circle>\n    <circle class=\"kole-backtop-ring-fg\" id=\"ring\" role=\"button\" aria-label=\"返回顶部\" cx=\"22\" cy=\"22\" fill=\"none\" r=\"20\" stroke-width=\"2\"></circle>\n  </svg>\n  <span class=\"kole-backtop-arrow\" aria-label=\"返回顶部\">↑</span>\n</div>",
   "preview": {
    "show": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>向下滚动页面</h2>\n<p>滚动超过 400px 后右下角出现返回顶部按钮，环显示滚动进度，点击平滑回到顶部。</p>\n<div>这里是长内容占位区……</div>\n<div class=\"kole-backtop kole-no-ring\" id=\"backtopPlain\" role=\"button\" aria-label=\"返回顶部（无进度环）\" style=\"left:24px;right:auto;display:flex\">\n  <span class=\"kole-backtop-arrow\" aria-hidden=\"true\">↑</span>\n</div>\n<div class=\"kole-backtop\" role=\"button\" aria-label=\"返回顶部\">\n  <svg viewBox=\"0 0 44 44\">\n    <circle class=\"kole-backtop-ring-bg\" aria-label=\"返回顶部\" cx=\"22\" cy=\"22\" fill=\"none\" r=\"20\" stroke-width=\"2\"></circle>\n    <circle class=\"kole-backtop-ring-fg\" role=\"button\" aria-label=\"返回顶部\" cx=\"22\" cy=\"22\" fill=\"none\" r=\"20\" stroke-width=\"2\"></circle>\n  </svg>\n  <span class=\"kole-backtop-arrow\" aria-label=\"返回顶部\">↑</span>\n</div>",
    "jsx": "import { KoleBackToTop } from 'kole-ui/react';\n\n<>\n  <KoleBackToTop threshold={400} showRing />\n  <KoleBackToTop threshold={400} showRing={false} />\n</>",
    "vue3": "<template>\n  <KoleBackToTop :threshold=\"400\" show-ring />\n  <KoleBackToTop :threshold=\"400\" :show-ring=\"false\" />\n</template>\n\n<script setup>\nimport { KoleBackToTop } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleBackToTop :threshold=\"400\" show-ring />\n    <KoleBackToTop :threshold=\"400\" :show-ring=\"false\" />\n  </div>\n</template>\n\n<script>\nimport { KoleBackToTop } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleBackToTop }\n};\n</script>",
    "tsx": "import { KoleBackToTop } from 'kole-ui/react';\n\nexport default function KoleBackToTopDemo(): JSX.Element {\n  return (\n    <>\n      <KoleBackToTop threshold={400} showRing />\n      <KoleBackToTop threshold={400} showRing={false} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleBackToTop :threshold=\"400\" show-ring />\n  <KoleBackToTop :threshold=\"400\" :show-ring=\"false\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleBackToTop } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('这里是长内容占位区……');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleBackToTop :threshold=\"400\" show-ring />\n    <KoleBackToTop :threshold=\"400\" :show-ring=\"false\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleBackToTop } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleBackToTop },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/BackToTop.html：一处 kole-backtop 带 kole-no-ring（左对齐、无进度环），另一处带 kole-backtop-ring-bg/ring-fg 进度环；threshold 默认 400 与显示开关 showRing 见 BackToTop.jsx 形参（滚动超过 400px 出现，见演示页 banner 文案）。"
   ]
  }
 ],
 "curated": true
}