Package Exports

@uiw/react-back-top
@uiw/react-back-top/cjs/index.js
@uiw/react-back-top/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-back-top) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

BackTop 返回顶部

返回页面顶部的操作按钮。

import { BackTop } from 'uiw';
// or
import BackTop from '@uiw/react-back-top';

基本用法

import React from 'react';
import { BackTop } from 'uiw';

function Demo() {
  return <div>
    <div>滚动滚动条，【快看右下角】，显示返回顶部按钮。</div>
    <BackTop
      style={{ backgroundColor: 'red', color: '#fff' }}
      step={500}
      speed={10}
      content={<div>Top</div>}
    />
  </div>
}
export default Demo

函数子组件

点击按钮滚动到顶部

import React from 'react';
import { BackTop, Button } from 'uiw';

function Demo() {
  return <BackTop
    fixed={false}
    step={500}
    clickable={false}
    speed={10}
  >
    {({ percent, scrollToTop }) => (
      <Button onClick={() => scrollToTop() } type="success">点击滚动到顶部{`${percent}%`}</Button>
    )}
  </BackTop>
}
export default Demo

组件子节点

点击按钮滚动到顶部

import React from 'react';
import { BackTop, Button } from 'uiw';

function Demo() {
  return <BackTop
    fixed={false}
    step={500}
    speed={10}
  >
    <Button type="success">点击滚动到顶部</Button>
  </BackTop>
}

export default Demo

Params

参数	说明	类型	默认值
content	滚动到顶部按钮内容	ReactNode/String	`0`
offsetTop	是否始终显示组件	Number	`0`
showBelow	滚动距离多少时显示组件	Number	`1`
clickable	是否可以点击	Bool	`true`
speed	滚动速度	Number	`50`
fixed	是否固定，默认`true`	Bool	`true`
style	CSS样式	Object	-
className	CSS类名称	String	-
onClick	点击回调	Function	-