ra-scrolltop

🌝A vue component that goes back to the top of the page.

• 中文
• English

demo

install by npm or yarn

npm

npm install ra-scrolltop --save

yarn

yarn add ra-scrolltop

import and use

Import for global usage

import Vue from 'vue'
import RaScrolltop from 'ra-scrolltop'

Vue.use(RaScrolltop)

Or on a single component

import RaScrolltop from 'ra-scrolltop'
...
components: { RaScrolltop }
...

Props

| Name | Type | Default | Description | | ---------- | ---------------- | ------------- | ------------------------------------------------------------------------------- | | bottom | String | 40px | bottom offset when component is visible | | right | String | 30px | right offset when component is visible | | speed | String | average | the rate of upward sliding, ['average', 'fast-to-slow','immediate'] | | offset | [String, Number] | 600 | where the component can visible when the user scrolls to an offset | | theme[new] | string | scroll-circle | provide some theme styles, ['scroll-circle', 'orange', 'rocket', 'rectangular'] |

Events

| Name | Description | | -------- | ----------------------------- | | scrolled | Fired when page's scroll ends |

How to use

default

<ra-scrolltop>
</ra-scrolltop>

It's possible to use your own html/vue component inside vue-backtotop component.

<ra-scrolltop>
    <button>Top</button>
</ra-scrolltop>

Now, you can add some props

<ra-scrolltop right="50px" bottom="20px" speed="immediate">
    <button>Top</button>
</ra-scrolltop>

Release Notes

v1.x

• Configuration with speed, position and slot

v2.x

• Add theme configuration - theme

Note

I am sorry that before version 1.0.3, I forgot to export the install function, which resulted in the undefined error of the component.

At the same time, my design ability is not very good, so I hope users can help to add some themes for other users to use. Thank you!

MIT

LICENCE