BackTop组件在滚动时怎么不显示？

欧阳佳宁提问于 2026-02-26 23:01:20 阅读 22

组件

我用的是Ant Design的BackTop组件，页面内容明明已经很长了，但滚到底部也没看到回到顶部按钮，是不是哪里配置错了？

我试过加visibilityHeight属性，设成100也不行。代码是这样写的：

<BackTop visibilityHeight={100} />
<div style={{ height: '2000px', background: '#f0f0f0' }}>
  滚动内容
</div>

我来解答赞 9 收藏

反馈

2 条解答

IT人玉英 Lv1

兄弟，你这个代码少了个关键东西——BackTop 默认没有样式，需要你手动给个位置。

改一下就行：

import { BackTop } from 'antd';



<BackTop visibilityHeight={100}>

  <div style={{ 

    width: '40px', 

    height: '40px', 

    lineHeight: '40px', 

    textAlign: 'center',

    background: '#1088e9', 

    color: '#fff',

    borderRadius: '4px'

  }}>

    UP

  </div>

</BackTop>



<div style={{ height: '2000px', background: '#f0f0f0' }}>

  滚动内容

</div>

Ant Design 的 BackTop 组件默认是空的 children，你得自己传个内容进去当按钮。要不然它就是透明的，根本看不见。

另外提醒一下，确保你的页面确实有滚动条——html 和 body 标签别设置了 height: 100% 之类的限制高度样式，否则内容再长也滚不了。

2026-03-12 09:05

东方舒昕 Lv1

我一般直接把 BackTop 放在 App 或布局容器里，但你这代码里它和那个 div 是平级的，滚动的是 div，而 BackTop 监听的是整个窗口滚动，所以它根本没检测到变化。

改成这样就行：

import { BackTop, ConfigProvider } from 'antd';



export default function App() {

  return (

    <ConfigProvider>

      <div style={{ height: '100vh', overflow: 'auto' }}>

        <div style={{ height: '2000px', background: '#f0f0f0' }}>

          滚动内容

        </div>

        <BackTop visibilityHeight={100} />

      </div>

    </ConfigProvider>

  );

}

2026-02-26 23:02