vue-top

A simple Vue.js component to scroll your webpage to the top

Installation

npm install --save vue-top

Use with Single File Component

Globally

import VueTop from 'vue-top';

Vue.component('vue-top', VueTop);

Locally

import VueTop from 'vue-top';

export default {
  components: {
    ... ,
    VueTop,
  },
};

Use in Browser

Include js file in page

<script type="text/javascript" src="unpkg.com/[email protected]/dist/vue-top.min.js"></script>

Install as plugin

Vue.use(VueTop);

Usage

<vue-top>
  <!-- Your HTML CODE -->
</vue-top>

Example

<vue-top>
  <i class="fa fa-arrow-up" aria-hidden="true"></i>
</vue-top>

<vue-top>
  <img src="path/yourIcon.png"></img>
</vue-top>

Properties

| Option | Type | Default | Description | | ----------- | ------ | ------- | -------------------------------------------------------------------------------------------------- | | bottom | String | 30px | This property will convert to CSS style property which is the distance from bottom of browser edge | | right | String | 30px | This property will convert to CSS style property which is the distance from right of browser edge | | speed | Number | 500 | Scolling speed , the smaller the faster | | customStyle | Object | Null | Define your own style to the component |