Backtop

Default

Appears after the scroll container passes 96px and stays at its lower-right edge. It does not need Affix.

Code copied

<template>
  <div class="backtop-demo__scroll backtop-demo__scroll--default">
    <p v-for="index in 18" :key="index">
      Scroll inside this panel, then use Backtop to return to the first item.
    </p>
    <p class="backtop-demo__end">You reached the end of the scroll area.</p>
    <s-backtop
      target=".backtop-demo__scroll--default"
      :visibility-height="96"
      :right="16"
      :bottom="16"
    />
  </div>
</template>

Near the bottom

Useful for lists and dynamic loading. visibility-height and visibility-bottom use OR logic. This example sets the former high to demonstrate the 72px remaining-distance trigger.

Code copied

<template>
  <div class="backtop-demo__scroll backtop-demo__scroll--distance">
    <p v-for="index in 18" :key="index">
      The control appears only when this container is close to its end.
    </p>
    <p class="backtop-demo__end">You reached the end of the scroll area.</p>
    <s-backtop
      target=".backtop-demo__scroll--distance"
      :visibility-height="10000"
      :visibility-bottom="72"
      :right="16"
      :bottom="16"
    />
  </div>
</template>

Custom icon

Use the default slot to replace the built-in arrow with an icon or custom content.

Code copied

<template>
  <div class="backtop-demo__scroll backtop-demo__scroll--custom">
    <p v-for="index in 18" :key="index">
      Replace the default arrow with any icon or custom slot content.
    </p>
    <p class="backtop-demo__end">You reached the end of the scroll area.</p>
    <s-backtop
      target=".backtop-demo__scroll--custom"
      :visibility-height="96"
      :right="16"
      :bottom="16"
    >
      <s-icon-expand class="backtop-demo__icon" />
    </s-backtop>
  </div>
</template>

<style scoped>