BackTop 回到顶部

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

何时使用

• 当页面内容区域比较长时；
• 当用户需要频繁返回顶部查看相关内容时。

代码演示

Scroll down to see the bottom-right gray button.

基本使用

最简单的用法。

<template>
  <a-back-top />
  Scroll down to see the bottom-right
  <strong style="color: rgba(64, 64, 64, 0.6)">gray</strong>
  button.
</template>

自定义样式

可以自定义回到顶部按钮的样式，限制宽高：40px * 40px。

<template>
  <div id="components-back-top-demo-custom">
    <a-back-top>
      <div class="ant-back-top-inner">UP</div>
    </a-back-top>
    Scroll down to see the bottom-right
    <strong style="color: #1088e9">blue</strong>
    button.
  </div>
</template>
<style scoped>
#components-back-top-demo-custom .ant-back-top {
  bottom: 100px;
}
#components-back-top-demo-custom .ant-back-top-inner {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 4px;
  background-color: #1088e9;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
</style>

API

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

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

事件