Skip to content

Files

Latest commit

22244c4 · Nov 29, 2023

History

History

react-back-top

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Sep 19, 2023
Nov 29, 2023
Nov 29, 2023
Aug 31, 2021

README.md

BackTop 返回顶部

Buy me a coffee Open in unpkg NPM Downloads npm version

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

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

基本用法

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

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

函数子组件

点击按钮滚动到顶部

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

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

组件子节点

点击按钮滚动到顶部

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

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

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 -