vue-go-top-button

A simple customizable go-to-top button component for Vue projects.

Installation

npm install vue-go-top-button --save

API

| Property | Type | Description | | ------ | ------ | ------ | | scrollDistance | number | Number of pixels to be scrolled Y for button to be shown. Defaults to 200px. Must be greater than zero. | | styles | object | User-defined styles config for the button. | | classNames | string | Custom class names in the following format 'class1 class2 class3'. | | animate | boolean | If true, scrolling will be animated. False by default. | | speed | number | Speedof animated scroll. Must be greater than 1. 80 by default. | | acceleration | number | Number of pixels to speed up when scrolling is animated. Zero by default - this way page will be scrolled top with the constant speed. |

Usage

Import statement:

// Your component code
import GoTopButton from "vue-go-top-button";
import "vue-go-top-button/dist/lib/vue-go-top-button.min.css";

export default {
    components: {GoTopButton}
}

On your template paste the <go-top-button></go-top-button> html. This will add a simple button with default styles and without animated scroll. By default go-top-button will appear on the right side, 50% top and bottom and without any icons or text. You can then customize its styles and behaviour.

Example of customization:

<go-top-button   :animate="true"
                 :speed="50"
                 :acceleration="2"
                 :scrollDistance="300"
                 :classNames="'custom-class'"
                 :styles="{
                    'border-radius': '20px 20px 20px 20px',
                    'right': '5px',
                    'color': 'green',
                    'border': '5px solid',
                    'line-height': '20px'
                 }">
        <i class=\'fa fa-arrow-up\'></i>
  </go-top-button>

Custom CSS class declaration (if needed):

.custom-class {
    position: fixed;
    background-color: pink;
    border-color: green;
    height: 30px;
    width: 30px;
}