vue-back-top

A back top component for vue.js.

View demo

Install

NPM

npm install @mlqt/vue-back-top

CDN

<script src="https://unpkg.com/@mlqt/vue-back-top"></script>

Usage

Use <back-top/> to enable the scroll to the top, and use props to define its options.

When the scroll bar height is greater than 100vh, back-top is display, otherwise hidden.

<back-top color="#409EFF" :size="1.1" :slow="10"> </back-top>

<!-- Replace the default icon with slot -->
<back-top>
    <div>Icon</div>
</back-top>

import Vue from 'vue'
import BackTop from '@mlqt/vue-back-top'

Vue.use(BackTop)

new Vue().$mount('#app')

Options

| Props | Description | Required | Type | Default | | ------ | ------------------------------------------------------------ | ------------ | ------ | ------- | | right | Back-top distance to the right | false | String | 3% | | bottom | Back-top distance to the bottom | false | String | 20% | | color | Back-top color | false | String | #409EFF | | size | Back-top size | false | Number | 1 | | slow | Back-top The speed of scrolling, the larger the value, the slower the scrolling | false | Number | 10 |

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

张鑫旭