element-plus/backtop.md at b8869f8b9dc3f9cd1ded7670cb90fe43357c208a

mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-15 01:41:20 +08:00

* style: use prettier

* style: just prettier format, no code changes

* style: eslint fix
object-shorthand, prefer-const

* style: fix no-void

* style: no-console

2021-09-04 19:29:28 +08:00

1.7 KiB

Raw Blame History

Backtop

A button to back to top

Basic usage

Scroll down to see the bottom-right button. :::demo

<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

:::

Customizations

Display area is 40px * 40px. :::demo

<template>
  Scroll down to see the bottom-right button.
  <el-backtop
    target=".page-component__scroll .el-scrollbar__wrap"
    :bottom="100"
  >
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
    >
      UP
    </div>
  </el-backtop>
</template>

:::

Attributes

Attribute	Description	Type	Default
target	the target to trigger scroll	string
visibility-height	the button will not show until the scroll height reaches this value	number	200
right	right distance	number	40
bottom	bottom distance	number	40

Events

Event Name	Description	Parameters
click	triggers when click	click event

1.7 KiB Raw Blame History