BackTop 回到顶部

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

何时使用

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

代码演示

基本

最简单的用法。

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

事件