Backtop 回到顶部

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

基础用法

通过滑动来查看容器右下角的按钮

<template>
  Scroll down to see the bottom-right button.
  <el-backtop :right="100" :bottom="100" />
</template>

自定义内容

显示区域被固定为 40px * 40px 的区域, 其中的内容可支持自定义。

<template>
  Scroll down to see the bottom-right button.
  <el-backtop :bottom="100">
    <div
      style="
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      "
    >
      UP
    </div>
  </el-backtop>
</template>

回到顶部 API

Backtop 属性

名称	说明	类型	默认值
`target`	触发滚动的对象	`string`	—
`visibility-height`	滚动高度达到此参数值才出现	`number`	`200`
`right`	控制其显示位置，距离页面右边距	`number`	`40`
`bottom`	控制其显示位置，距离页面底部距离	`number`	`40`