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

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

组件

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

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

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

我来解答赞 5 收藏

反馈

1 条解答

东方舒昕 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