Skip to content

annapogorelova/vue-go-top-button

Repository files navigation

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;
}