BackTop 返回顶部 ​

<f-back-top>返回顶部</f-back-top>

<f-back-top bottom="90px" behavior="auto">auto 模式</f-back-top>
<f-back-top bottom="140px" behavior="smooth">smooth 模式</f-back-top>

<f-back-top bottom="190px" round>
  <f-svg-icon :icon="FIconSnowflake" />
</f-back-top>

<script lang="ts" setup>
  import { FIconSnowflake, FIconUpload } from '@fighting-design/fighting-icon'
</script>

<f-back-top bottom="190px" right="100px" round color="red">
  <f-svg-icon :icon="FIconUpload" />
</f-back-top>

<script lang="ts" setup>
  import { FIconUpload } from '@fighting-design/fighting-icon'
</script>

<template>
  <div class="back-top-demo">
    <p v-for="i in 20">这是一段文字{{ i + 1 }}</p>
  </div>
  <f-back-top listen-el=".back-top-demo" right="200px">监听目标</f-back-top>
</template>

<style scoped>
  .back-top-demo {
    width: 100%;
    height: 100px;
    border: 4px solid skyblue;
    overflow: auto;
  }
</style>