• BackTop 回到顶部

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

    何时使用

    代码演示

    最简单的用法。
    expand code expand code
    import { BackTop } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <BackTop />
        Scroll down to see the bottom-right
        <strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
        button.
      </div>,
      mountNode
    );
    
    可以自定义回到顶部按钮的样式,限制宽高:40px * 40px
    expand code expand code
    import { BackTop } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <BackTop>
          <div className="ant-back-top-inner">UP</div>
        </BackTop>
        Scroll down to see the bottom-right
        <strong style={{ color: '#1088e9' }}> blue </strong>
        button.
      </div>,
      mountNode
    );
    

    API

    有默认样式,距离底部 50px,可覆盖。

    自定义样式宽高不大于 40px * 40px。

    参数 说明 类型 默认值
    target 设置需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 Function () => window
    visibilityHeight 滚动高度达到此参数值才出现 BackTop number 400
    onClick 点击按钮的回调函数 Function -