@ohkit/back-top 0.0.1

package/LICENSE.md

@@ -0,0 +1,5 @@
+Copyright (c) [2025], [wuqiuyang]
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,111 @@
+# @ohkit/back-top
+
+返回顶部组件。当页面或容器滚动超过指定距离后自动显示返回顶部按钮，点击后平滑滚动到顶部。
+
+## 安装
+
+```bash
+npm install @ohkit/back-top
+```
+
+## 使用
+
+### 基本用法
+```tsx
+import { BackTop } from '@ohkit/back-top';
+import '@ohkit/back-top/dist/index.css';
+
+function App() {
+  return (
+    <div style={{ height: '100vh', overflow: 'auto' }}>
+      <div style={{ minHeight: '2000px' }}>
+        {/* 很长的高度内容 */}
+      </div>
+      {/* 组件放入滚动容器中，自动查找所属的滚动容器 */}
+      <BackTop />
+    </div>
+  );
+}
+```
+
+### 指定滚动容器
+```tsx
+import { useRef } from 'react';
+import { BackTop } from '@ohkit/back-top';
+
+function CustomContainer() {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  
+  return (
+    <section>
+      <div ref={scrollContainerRef} style={{ height: '400px', overflow: 'auto' }}>
+        <div style={{ minHeight: '800px' }}>
+          {/* 内容 */}
+        </div>
+      </div>
+      <BackTop 
+        scrollRefDom={scrollContainerRef}
+        mountType="absolute"
+      />
+    </section>
+  );
+}
+```
+
+### 自定义按钮内容
+```tsx
+<BackTop title="回到顶部" children={<>↑<br/>顶部</>} />
+```
+
+## API
+
+### BackTop Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| className | string | '' | 自定义类名 |
+| children | ReactNode | '↑' | 按钮内容，支持React节点 |
+| mountType | 'fixed' \| 'absolute' | 'fixed' | 按钮定位方式 |
+| scrollTop | number | 500 | 显示按钮的滚动阈值（像素） |
+| scrollRefDom | React.RefObject<HTMLElement> | - | 自定义滚动容器 |
+| position | 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' | 'bottom-right' | 按钮位置 |
+| offset | [number, number] | [50, 100] | 按钮偏移量 [top/bottom, left/right] |
+| realScroll | boolean | false | 是否查找真实可滚动容器 |
+| title | string | '返回顶部' | 按钮提示文本 |
+
+## 特性说明
+
+### 自动滚动容器检测
+组件会自动查找包含它的第一个滚动容器。如果设置 `realScroll={true}`，会查找 `scrollHeight > clientHeight` 的真实滚动容器。
+
+### 平滑滚动
+点击按钮时会使用 `scrollTo({ top: 0, behavior: 'smooth' })` 实现平滑滚动效果。
+
+### 性能优化
+- 使用防抖机制避免频繁的滚动事件处理
+- 只有滚动状态变化时才触发重渲染
+
+## 依赖说明
+
+组件依赖以下工具包：
+- `@ohkit/dom-helper`：DOM事件处理
+- `@ohkit/prefix-classname`：CSS类名前缀
+- `@ohkit/react-helper`：React运行时工具
+
+## 样式定制
+
+组件支持通过 `className` 属性进行样式覆盖：
+
+```tsx
+<BackTop className="custom-back-top" />
+```
+
+然后通过CSS或CSS-in-JS定义样式：
+
+```css
+.custom-back-top {
+  background: #007bff;
+  border-radius: 8px;
+  /* 其他自定义样式 */
+}
+```

package/dist/index.css

@@ -0,0 +1,2 @@
+.ohkit-back-top__container{align-items:center;border-radius:4px;box-sizing:border-box;color:#fff;display:flex;font-size:14px;justify-content:center;line-height:1.2em;min-height:40px;min-width:40px;padding:4px;position:fixed;transition:all .2s ease-in;white-space:pre-line;z-index:10}.ohkit-back-top__absolute{bottom:20px;position:absolute;right:20px}.ohkit-back-top__invisible{background:transparent;opacity:0;pointer-events:none}.ohkit-back-top__visible{background:rgba(78,85,98,.25);cursor:pointer;opacity:1}.ohkit-back-top__visible:hover{background:rgba(78,85,98,.4)}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,2BASE,kBAAmB,CAKnB,iBAAkB,CAZlB,qBAAsB,CAUtB,UAAW,CAJX,YAAa,CAGb,cAAe,CADf,sBAAuB,CAJvB,iBAAkB,CADlB,eAAgB,CADhB,cAAe,CADf,WAAY,CAFZ,cAAe,CAcf,0BAA4B,CAF5B,oBAAqB,CANrB,UASF,CACA,0BAGE,WAAY,CAFZ,iBAAkB,CAClB,UAEF,CACA,2BAGE,sBAAuB,CADvB,SAAU,CADV,mBAGF,CACA,yBACE,6BAAkC,CAElC,cAAe,CADf,SAEF,CACA,+BACE,4BACF","file":"index.css","sourcesContent":[".ohkit-back-top__container {\n  position: fixed;\n  box-sizing: border-box;\n  padding: 4px;\n  min-width: 40px;\n  min-height: 40px;\n  line-height: 1.2em;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: #fff;\n  white-space: pre-line;\n  border-radius: 4px;\n  transition: all 0.2s ease-in;\n}\n.ohkit-back-top__absolute {\n  position: absolute;\n  right: 20px;\n  bottom: 20px;\n}\n.ohkit-back-top__invisible {\n  pointer-events: none;\n  opacity: 0;\n  background: transparent;\n}\n.ohkit-back-top__visible {\n  background: rgba(78, 85, 98, 0.25);\n  opacity: 1;\n  cursor: pointer;\n}\n.ohkit-back-top__visible:hover {\n  background: rgba(78, 85, 98, 0.4);\n}"]}

package/dist/index.es.js

@@ -0,0 +1,2 @@
+import o,{useState as r,useRef as e,useMemo as l,useEffect as i}from"react";import{prefixClassname as t,classNames as s}from"@ohkit/prefix-classname";import{useRuntime as n,useScrollEntry as c}from"@ohkit/react-helper";import{addEventListener as a}from"@ohkit/dom-helper";var m=t("ohkit-back-top__"),v=function(t){var v=t.children,p=t.className,u=t.scrollTop,f=void 0===u?500:u,d=t.mountType,b=void 0===d?"fixed":d,h=t.position,R=void 0===h?"bottom-right":h,k=t.offset,L=void 0===k?[50,100]:k,x=t.title,T=void 0===x?"返回顶部":x,y=t.scrollRefDom,V=t.realScroll,g=void 0!==V&&V,C=r(!1),E=C[0],N=C[1],S=e(null),_=n({preVisible:E,scrollListenerRemover:null})[0],D=c(y||S,{realScroll:g,autoFind:!0,intervalTime:3e3}),F=l(function(){var o,r=R.split("-"),e=r[1];return(o={})[r[0]]=L[0]+"px",o[e]=L[1]+"px",o},[R,L]);return i(function(){if(console.log("scrollEntry",D),D&&D.scroller){null==_.scrollListenerRemover||_.scrollListenerRemover();var o=function(){var o=D.scrollContainer,r=!!(o&&o.scrollTop>f);_.preVisible!==r&&(_.preVisible=r,N(r))};return o(),_.scrollListenerRemover=a(D.scroller,"scroll",o),function(){null==_.scrollListenerRemover||_.scrollListenerRemover()}}},[D.scroller]),/*#__PURE__*/o.createElement("div",{title:T,ref:S,style:F,className:s(m("container",{visible:!!E,invisible:!E}),m({absolute:"absolute"===b}),p),onClick:function(){var o;null==(o=D.scroller)||o.scrollTo({top:0,behavior:"smooth"})}},v||"↑")};export{v as BackTop,m as c};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  scrollRefDom?: React.MutableRefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollRefDom,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollRefDom ? scrollRefDom : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","BackTop","_ref","children","className","_ref$scrollTop","scrollTop","_ref$mountType","mountType","_ref$position","position","_ref$offset","offset","_ref$title","title","scrollRefDom","_ref$realScroll","realScroll","_useState","useState","visible","setVisible","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","_ref2","_position$split","split","y","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"gRAUa,IAAAA,EAAIC,EAAE,oBAuCNC,EAAU,SAAHC,GAUD,IATjBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UAASC,EAAAH,EACTI,UAAAA,OAAY,IAAHD,EAAG,IAAGA,EAAAE,EAAAL,EACfM,UAAAA,OAAY,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACnBQ,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAT,EACzBU,OAAAA,OAAM,IAAAD,EAAG,CAAC,GAAI,KAAIA,EAAAE,EAAAX,EAClBY,MAAAA,OAAK,IAAAD,EAAG,OAAMA,EACdE,EAAYb,EAAZa,aAAYC,EAAAd,EACZe,WAAAA,OAAU,IAAAD,GAAQA,EAElBE,EAA8BC,GAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAASC,EAAuB,MAC/BC,EAAWC,EAGf,CACDC,WAAYN,EACZO,sBAAuB,OALX,GAQRC,EAAcC,EAAed,GAA8BO,EAAQ,CACvEL,WAAAA,EACAa,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAQ,WAAK,IAAAC,EACjCC,EAAezB,EAAS0B,MAAM,KAApBC,EAACF,EACX,GAAA,OAAAD,EAAA,CAAA,GADQC,EAAEE,IAEAzB,EAAO,GAAEsB,KAAAA,EAChBG,GAAOzB,EAAO,GAAE,KAAAsB,CAErB,EAAG,CAACxB,EAAUE,IA6Bd,OA3BA0B,EAAU,WAER,GADAC,QAAQC,IAAI,cAAeZ,GACvBA,GAAeA,EAAYa,SAAU,CACV,MAA7BjB,EAAQG,uBAARH,EAAQG,wBACR,IAAMe,EAAW,WACf,IAAQC,EAAoBf,EAApBe,gBACFC,KACJD,GACCA,EAAgCrC,UAAYA,GAE3CkB,EAAQE,aAAekB,IACzBpB,EAAQE,WAAakB,EACrBvB,EAAWuB,GAEf,EAOA,OANAF,IACAlB,EAAQG,sBAAwBkB,EAC9BjB,EAAYa,SACZ,SACAC,GAEK,WACLlB,MAAAA,EAAQG,uBAARH,EAAQG,uBACV,CACD,CACH,EAAG,CAACC,EAAYa,wBAGZK,EAAAC,cAAA,MAAA,CACEjC,MAAOA,EACPkC,IAAK1B,EACL2B,MAAOjB,EACP5B,UAAW8C,EACTnD,EAAE,YAAa,CACbqB,UAAWA,EACX+B,WAAY/B,IAEdrB,EAAE,CAAEqD,SAAwB,aAAd5C,IACdJ,GAEFiD,QAAS,WAAK,IAAAC,EACZA,OAAAA,EAAA1B,EAAYa,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,UAEd,GAECtD,GAAY,IAGrB"}

package/dist/index.js

@@ -0,0 +1,2 @@
+var e=require("react"),r=require("@ohkit/prefix-classname"),l=require("@ohkit/react-helper"),o=require("@ohkit/dom-helper");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=/*#__PURE__*/t(e),s=r.prefixClassname("ohkit-back-top__");exports.BackTop=function(t){var n=t.children,c=t.className,a=t.scrollTop,u=void 0===a?500:a,v=t.mountType,f=void 0===v?"fixed":v,m=t.position,p=void 0===m?"bottom-right":m,d=t.offset,b=void 0===d?[50,100]:d,h=t.title,R=void 0===h?"返回顶部":h,k=t.scrollRefDom,x=t.realScroll,L=void 0!==x&&x,T=e.useState(!1),y=T[0],E=T[1],q=e.useRef(null),S=l.useRuntime({preVisible:y,scrollListenerRemover:null})[0],C=l.useScrollEntry(k||q,{realScroll:L,autoFind:!0,intervalTime:3e3}),N=e.useMemo(function(){var e,r=p.split("-"),l=r[1];return(e={})[r[0]]=b[0]+"px",e[l]=b[1]+"px",e},[p,b]);return e.useEffect(function(){if(console.log("scrollEntry",C),C&&C.scroller){null==S.scrollListenerRemover||S.scrollListenerRemover();var e=function(){var e=C.scrollContainer,r=!!(e&&e.scrollTop>u);S.preVisible!==r&&(S.preVisible=r,E(r))};return e(),S.scrollListenerRemover=o.addEventListener(C.scroller,"scroll",e),function(){null==S.scrollListenerRemover||S.scrollListenerRemover()}}},[C.scroller]),/*#__PURE__*/i.default.createElement("div",{title:R,ref:q,style:N,className:r.classNames(s("container",{visible:!!y,invisible:!y}),s({absolute:"absolute"===f}),c),onClick:function(){var e;null==(e=C.scroller)||e.scrollTo({top:0,behavior:"smooth"})}},n||"↑")},exports.c=s;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  scrollRefDom?: React.MutableRefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollRefDom,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollRefDom ? scrollRefDom : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","prefixClassname","_ref","children","className","_ref$scrollTop","scrollTop","_ref$mountType","mountType","_ref$position","position","_ref$offset","offset","_ref$title","title","scrollRefDom","_ref$realScroll","realScroll","_useState","useState","visible","setVisible","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","_ref2","_position$split","split","y","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"4NAUaA,EAAIC,EAACC,gBAAC,oCAuCI,SAAHC,GAUD,IATjBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UAASC,EAAAH,EACTI,UAAAA,OAAY,IAAHD,EAAG,IAAGA,EAAAE,EAAAL,EACfM,UAAAA,OAAY,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACnBQ,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAT,EACzBU,OAAAA,OAAM,IAAAD,EAAG,CAAC,GAAI,KAAIA,EAAAE,EAAAX,EAClBY,MAAAA,OAAK,IAAAD,EAAG,OAAMA,EACdE,EAAYb,EAAZa,aAAYC,EAAAd,EACZe,WAAAA,OAAU,IAAAD,GAAQA,EAElBE,EAA8BC,EAAAA,UAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAASC,EAAAA,OAAuB,MAC/BC,EAAWC,EAAAA,WAGf,CACDC,WAAYN,EACZO,sBAAuB,OALX,GAQRC,EAAcC,EAAcA,eAACd,GAA8BO,EAAQ,CACvEL,WAAAA,EACAa,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAOA,QAAC,WAAK,IAAAC,EACjCC,EAAezB,EAAS0B,MAAM,KAApBC,EAACF,EACX,GAAA,OAAAD,EAAA,CAAA,GADQC,EAAEE,IAEAzB,EAAO,GAAEsB,KAAAA,EAChBG,GAAOzB,EAAO,GAAE,KAAAsB,CAErB,EAAG,CAACxB,EAAUE,IA6Bd,OA3BA0B,EAASA,UAAC,WAER,GADAC,QAAQC,IAAI,cAAeZ,GACvBA,GAAeA,EAAYa,SAAU,CACV,MAA7BjB,EAAQG,uBAARH,EAAQG,wBACR,IAAMe,EAAW,WACf,IAAQC,EAAoBf,EAApBe,gBACFC,KACJD,GACCA,EAAgCrC,UAAYA,GAE3CkB,EAAQE,aAAekB,IACzBpB,EAAQE,WAAakB,EACrBvB,EAAWuB,GAEf,EAOA,OANAF,IACAlB,EAAQG,sBAAwBkB,EAAgBA,iBAC9CjB,EAAYa,SACZ,SACAC,GAEK,WACLlB,MAAAA,EAAQG,uBAARH,EAAQG,uBACV,CACD,CACH,EAAG,CAACC,EAAYa,wBAGZK,EAAA,QAAAC,cAAA,MAAA,CACEjC,MAAOA,EACPkC,IAAK1B,EACL2B,MAAOjB,EACP5B,UAAW8C,EAAAA,WACTnD,EAAE,YAAa,CACbqB,UAAWA,EACX+B,WAAY/B,IAEdrB,EAAE,CAAEqD,SAAwB,aAAd5C,IACdJ,GAEFiD,QAAS,WAAK,IAAAC,EACZA,OAAAA,EAAA1B,EAAYa,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,UAEd,GAECtD,GAAY,IAGrB"}

package/dist/index.modern.mjs

@@ -0,0 +1,2 @@
+import e,{useState as l,useRef as r,useMemo as o,useEffect as t}from"react";import{prefixClassname as s,classNames as i}from"@ohkit/prefix-classname";import{useRuntime as c,useScrollEntry as n}from"@ohkit/react-helper";import{addEventListener as m}from"@ohkit/dom-helper";const a=s("ohkit-back-top__"),p=({children:s,className:p,scrollTop:u=500,mountType:v="fixed",position:f="bottom-right",offset:b=[50,100],title:h="返回顶部",scrollRefDom:R,realScroll:k=!1})=>{const[L,d]=l(!1),x=r(null),[T]=c({preVisible:L,scrollListenerRemover:null}),y=n(R||x,{realScroll:k,autoFind:!0,intervalTime:3e3}),V=o(()=>{const[e,l]=f.split("-");return{[e]:`${b[0]}px`,[l]:`${b[1]}px`}},[f,b]);return t(()=>{if(console.log("scrollEntry",y),y&&y.scroller){null==T.scrollListenerRemover||T.scrollListenerRemover();const e=()=>{const{scrollContainer:e}=y,l=!!(e&&e.scrollTop>u);T.preVisible!==l&&(T.preVisible=l,d(l))};return e(),T.scrollListenerRemover=m(y.scroller,"scroll",e),()=>{null==T.scrollListenerRemover||T.scrollListenerRemover()}}},[y.scroller]),/*#__PURE__*/e.createElement("div",{title:h,ref:x,style:V,className:i(a("container",{visible:!!L,invisible:!L}),a({absolute:"absolute"===v}),p),onClick:()=>{var e;null==(e=y.scroller)||e.scrollTo({top:0,behavior:"smooth"})}},s||"↑")};export{p as BackTop,a as c};
+//# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.mjs","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  scrollRefDom?: React.MutableRefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollRefDom,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollRefDom ? scrollRefDom : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","BackTop","children","className","scrollTop","mountType","position","offset","title","scrollRefDom","realScroll","visible","setVisible","useState","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","x","y","split","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"gRAUa,MAAAA,EAAIC,EAAE,oBAuCNC,EAAUA,EACrBC,WACAC,YACAC,UAAAA,EAAY,IACZC,UAAAA,EAAY,QACZC,SAAAA,EAAW,eACXC,OAAAA,EAAS,CAAC,GAAI,KACdC,MAAAA,EAAQ,OACRC,eACAC,WAAAA,GAAa,MAEb,MAAOC,EAASC,GAAcC,GAAS,GACjCC,EAASC,EAAuB,OAC/BC,GAAWC,EAGf,CACDC,WAAYP,EACZQ,sBAAuB,OAGnBC,EAAcC,EAAeZ,GAA8BK,EAAQ,CACvEJ,WAAAA,EACAY,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAQ,KAC5B,MAAOC,EAAGC,GAAKrB,EAASsB,MAAM,KAC9B,MAAO,CACLF,CAACA,GAAI,GAAGnB,EAAO,OACfoB,CAACA,GAAI,GAAGpB,EAAO,SAEhB,CAACD,EAAUC,IA6Bd,OA3BAsB,EAAU,KAER,GADAC,QAAQC,IAAI,cAAeX,GACvBA,GAAeA,EAAYY,SAAU,CACvChB,MAAAA,EAAQG,uBAARH,EAAQG,wBACR,MAAMc,EAAWA,KACf,MAAMC,gBAAEA,GAAoBd,EACtBe,KACJD,GACCA,EAAgC9B,UAAYA,GAE3CY,EAAQE,aAAeiB,IACzBnB,EAAQE,WAAaiB,EACrBvB,EAAWuB,KASf,OANAF,IACAjB,EAAQG,sBAAwBiB,EAC9BhB,EAAYY,SACZ,SACAC,GAEK,KACLjB,MAAAA,EAAQG,uBAARH,EAAQG,wBAEX,GACA,CAACC,EAAYY,wBAGZK,EAAAC,cACE9B,MAAAA,CAAAA,MAAOA,EACP+B,IAAKzB,EACL0B,MAAOhB,EACPrB,UAAWsC,EACT1C,EAAE,YAAa,CACbY,UAAWA,EACX+B,WAAY/B,IAEdZ,EAAE,CAAE4C,SAAwB,aAAdtC,IACdF,GAEFyC,QAASA,KAAKC,IAAAA,EACZA,OAAAA,EAAAzB,EAAYY,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,aAIb9C,GAAY"}

package/dist/index.umd.js

@@ -0,0 +1,2 @@
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("@ohkit/prefix-classname"),require("@ohkit/react-helper"),require("@ohkit/dom-helper")):"function"==typeof define&&define.amd?define(["exports","react","@ohkit/prefix-classname","@ohkit/react-helper","@ohkit/dom-helper"],r):r((e||self).backTop={},e.react,e.prefixClassname,e.reactHelper,e.domHelper)}(this,function(e,r,o,l,t){function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/i(r),s=o.prefixClassname("ohkit-back-top__");e.BackTop=function(e){var i=e.children,c=e.className,a=e.scrollTop,u=void 0===a?500:a,f=e.mountType,p=void 0===f?"fixed":f,d=e.position,m=void 0===d?"bottom-right":d,v=e.offset,h=void 0===v?[50,100]:v,b=e.title,k=void 0===b?"返回顶部":b,x=e.scrollRefDom,y=e.realScroll,R=void 0!==y&&y,T=r.useState(!1),L=T[0],E=T[1],g=r.useRef(null),q=l.useRuntime({preVisible:L,scrollListenerRemover:null})[0],C=l.useScrollEntry(x||g,{realScroll:R,autoFind:!0,intervalTime:3e3}),S=r.useMemo(function(){var e,r=m.split("-"),o=r[1];return(e={})[r[0]]=h[0]+"px",e[o]=h[1]+"px",e},[m,h]);return r.useEffect(function(){if(console.log("scrollEntry",C),C&&C.scroller){null==q.scrollListenerRemover||q.scrollListenerRemover();var e=function(){var e=C.scrollContainer,r=!!(e&&e.scrollTop>u);q.preVisible!==r&&(q.preVisible=r,E(r))};return e(),q.scrollListenerRemover=t.addEventListener(C.scroller,"scroll",e),function(){null==q.scrollListenerRemover||q.scrollListenerRemover()}}},[C.scroller]),/*#__PURE__*/n.default.createElement("div",{title:k,ref:g,style:S,className:o.classNames(s("container",{visible:!!L,invisible:!L}),s({absolute:"absolute"===p}),c),onClick:function(){var e;null==(e=C.scroller)||e.scrollTo({top:0,behavior:"smooth"})}},i||"↑")},e.c=s});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  scrollRefDom?: React.MutableRefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollRefDom,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollRefDom ? scrollRefDom : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","prefixClassname","_ref","children","className","_ref$scrollTop","scrollTop","_ref$mountType","mountType","_ref$position","position","_ref$offset","offset","_ref$title","title","scrollRefDom","_ref$realScroll","realScroll","_useState","useState","visible","setVisible","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","_ref2","_position$split","split","y","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"yjBAUaA,EAAIC,EAACC,gBAAC,8BAuCI,SAAHC,GAUD,IATjBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UAASC,EAAAH,EACTI,UAAAA,OAAY,IAAHD,EAAG,IAAGA,EAAAE,EAAAL,EACfM,UAAAA,OAAY,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACnBQ,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAT,EACzBU,OAAAA,OAAM,IAAAD,EAAG,CAAC,GAAI,KAAIA,EAAAE,EAAAX,EAClBY,MAAAA,OAAK,IAAAD,EAAG,OAAMA,EACdE,EAAYb,EAAZa,aAAYC,EAAAd,EACZe,WAAAA,OAAU,IAAAD,GAAQA,EAElBE,EAA8BC,EAAAA,UAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAASC,EAAAA,OAAuB,MAC/BC,EAAWC,EAAAA,WAGf,CACDC,WAAYN,EACZO,sBAAuB,OALX,GAQRC,EAAcC,EAAcA,eAACd,GAA8BO,EAAQ,CACvEL,WAAAA,EACAa,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAOA,QAAC,WAAK,IAAAC,EACjCC,EAAezB,EAAS0B,MAAM,KAApBC,EAACF,EACX,GAAA,OAAAD,EAAA,CAAA,GADQC,EAAEE,IAEAzB,EAAO,GAAEsB,KAAAA,EAChBG,GAAOzB,EAAO,GAAE,KAAAsB,CAErB,EAAG,CAACxB,EAAUE,IA6Bd,OA3BA0B,EAASA,UAAC,WAER,GADAC,QAAQC,IAAI,cAAeZ,GACvBA,GAAeA,EAAYa,SAAU,CACV,MAA7BjB,EAAQG,uBAARH,EAAQG,wBACR,IAAMe,EAAW,WACf,IAAQC,EAAoBf,EAApBe,gBACFC,KACJD,GACCA,EAAgCrC,UAAYA,GAE3CkB,EAAQE,aAAekB,IACzBpB,EAAQE,WAAakB,EACrBvB,EAAWuB,GAEf,EAOA,OANAF,IACAlB,EAAQG,sBAAwBkB,EAAgBA,iBAC9CjB,EAAYa,SACZ,SACAC,GAEK,WACLlB,MAAAA,EAAQG,uBAARH,EAAQG,uBACV,CACD,CACH,EAAG,CAACC,EAAYa,wBAGZK,EAAA,QAAAC,cAAA,MAAA,CACEjC,MAAOA,EACPkC,IAAK1B,EACL2B,MAAOjB,EACP5B,UAAW8C,EAAAA,WACTnD,EAAE,YAAa,CACbqB,UAAWA,EACX+B,WAAY/B,IAEdrB,EAAE,CAAEqD,SAAwB,aAAd5C,IACdJ,GAEFiD,QAAS,WAAK,IAAAC,EACZA,OAAAA,EAAA1B,EAAYa,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,UAEd,GAECtD,GAAY,IAGrB"}

package/dist/types/index.d.ts

@@ -0,0 +1,40 @@
+import React, { PropsWithChildren } from "react";
+import { classNames as cx } from "@ohkit/prefix-classname";
+import "./style.scss";
+export declare const c: (...arg: cx.ArgumentArray) => string;
+export interface IBackTop {
+    className?: string;
+    /**
+     * 按钮位置，fixed 或 absolute
+     * @default "fixed"
+     */
+    mountType?: "fixed" | "absolute";
+    /**
+     * 滚动距离，当滚动距离大于此值时显示返回顶部按钮
+     * @default 500
+     */
+    scrollTop?: number;
+    scrollRefDom?: React.MutableRefObject<HTMLElement>;
+    /**
+     * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left
+     * @default "bottom-right"
+     */
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    /**
+     * 按钮位置偏移量px, 即[position.split("-")[0], position.split("-")[1]]
+     * @default[50, 100]
+     */
+    offset?: [number, number];
+    /**
+     * 是否查找真实可滚动的容器，scrollHeight > clientHeight
+     * @default false
+     */
+    realScroll?: boolean;
+    /**
+     * 按钮标题
+     * @default "返回顶部"
+     */
+    title?: string;
+}
+export type BackTopProps = PropsWithChildren<IBackTop>;
+export declare const BackTop: ({ children, className, scrollTop, mountType, position, offset, title, scrollRefDom, realScroll, }: BackTopProps) => React.JSX.Element;

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@ohkit/back-top",
+  "version": "0.0.1",
+  "description": "列表滚动超过指定距离后自动展示返回顶部按钮",
+  "keywords": [
+    "back-top"
+  ],
+  "homepage": "https://wuqiuyang.github.io/ohkit/storybook-static",
+  "license": "ISC",
+  "source": "src/index.@(js|jsx|mjs|ts|tsx)",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/types/index.d.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WuQiuYang/ohkit"
+  },
+  "scripts": {
+    "build": "npm run clean && microbundle --jsx React.createElement",
+    "dev": "npm run watch",
+    "watch": "microbundle watch --jsx React.createElement --no-compress --format es --output dist/index.es.js",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@ohkit/dom-helper": "0.0.5",
+    "@ohkit/prefix-classname": "^0.0.3",
+    "@ohkit/react-helper": "0.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "gitHead": "032c94e624cb5be095bae2032083c12a75230de6"
+}

package/src/index.tsx

@@ -0,0 +1,135 @@
+import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from "react";
+import {
+  prefixClassname as p,
+  classNames as cx,
+} from "@ohkit/prefix-classname";
+import { useRuntime, useScrollEntry } from "@ohkit/react-helper";
+import { addEventListener } from "@ohkit/dom-helper";
+
+import "./style.scss";
+
+export const c = p("ohkit-back-top__");
+
+export interface IBackTop {
+  className?: string;
+  /**
+   * 按钮位置，fixed 或 absolute
+   * @default "fixed"
+   */
+  mountType?: "fixed" | "absolute";
+  /**
+   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮
+   * @default 500
+   */
+  scrollTop?: number;
+  scrollRefDom?: React.MutableRefObject<HTMLElement>;
+  /**
+   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left
+   * @default "bottom-right"
+   */
+  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  /**
+   * 按钮位置偏移量px, 即[position.split("-")[0], position.split("-")[1]]
+   * @default[50, 100]
+   */
+  offset?: [number, number];
+  /**
+   * 是否查找真实可滚动的容器，scrollHeight > clientHeight
+   * @default false
+   */
+  realScroll?: boolean;
+  /**
+   * 按钮标题
+   * @default "返回顶部"
+   */
+  title?: string;
+}
+
+export type BackTopProps = PropsWithChildren<IBackTop>;
+
+export const BackTop = ({
+  children,
+  className,
+  scrollTop = 500,
+  mountType = "fixed",
+  position = "bottom-right",
+  offset = [50, 100],
+  title = "返回顶部",
+  scrollRefDom,
+  realScroll = false,
+}: BackTopProps) => {
+  const [visible, setVisible] = useState(false);
+  const domRef = useRef<HTMLDivElement>(null);
+  const [runtime] = useRuntime<{
+    preVisible: boolean;
+    scrollListenerRemover: null | (() => void);
+  }>({
+    preVisible: visible,
+    scrollListenerRemover: null,
+  });
+
+  const scrollEntry = useScrollEntry(scrollRefDom ? scrollRefDom : domRef, {
+    realScroll,
+    autoFind: true,
+    intervalTime: 3000,
+  });
+
+  const positionStyle = useMemo(() => {
+    const [x, y] = position.split("-");
+    return {
+      [x]: `${offset[0]}px`,
+      [y]: `${offset[1]}px`,
+    };
+  }, [position, offset]);
+
+  useEffect(() => {
+    console.log('scrollEntry', scrollEntry);
+    if (scrollEntry && scrollEntry.scroller) {
+      runtime.scrollListenerRemover?.();
+      const onScroll = () => {
+        const { scrollContainer } = scrollEntry;
+        const curVisible = !!(
+          scrollContainer &&
+          (scrollContainer as HTMLElement).scrollTop > scrollTop
+        );
+        if (runtime.preVisible !== curVisible) {
+          runtime.preVisible = curVisible;
+          setVisible(curVisible);
+        }
+      };
+      onScroll();
+      runtime.scrollListenerRemover = addEventListener(
+        scrollEntry.scroller,
+        "scroll",
+        onScroll
+      );
+      return () => {
+        runtime.scrollListenerRemover?.();
+      };
+    }
+  }, [scrollEntry.scroller]);
+
+  return (
+      <div
+        title={title}
+        ref={domRef}
+        style={positionStyle}
+        className={cx(
+          c("container", {
+            visible: !!visible,
+            invisible: !visible,
+          }),
+          c({ absolute: mountType === "absolute" }),
+          className
+        )}
+        onClick={() => {
+          scrollEntry.scroller?.scrollTo({
+            top: 0,
+            behavior: "smooth",
+          });
+        }}
+      >
+        {children || '↑'}
+      </div>
+  );
+};

package/src/style.scss

@@ -0,0 +1,46 @@
+$prefix: ohkit;
+
+.#{$prefix}-back-top__ {
+  &container {
+    // 添加你的样式
+    position: fixed;
+    // right: 100px;
+    // bottom: 50px;
+    box-sizing: border-box;
+    padding: 4px;
+    min-width: 40px;
+    min-height: 40px;
+    line-height: 1.2em;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: #fff;
+    white-space: pre-line;
+    border-radius: 4px;
+    // border-radius: 50%;
+
+    transition: all 0.2s ease-in;
+  }
+  &absolute {
+      position: absolute;
+      right: 20px;
+      bottom: 20px;
+  }
+
+  &invisible {
+      pointer-events: none;
+      opacity: 0;
+      background: transparent;
+  }
+  &visible {
+      background: rgba(78, 85, 98, 0.25);
+      opacity: 1;
+      cursor: pointer;
+
+      &:hover {
+          background: rgba(78, 85, 98, 0.4);
+      }
+  }
+}