vue-go-top-button

    1.0.4 • Public • Published

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

    Install

    npm i vue-go-top-button

    DownloadsWeekly Downloads

    10

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    56.8 kB

    Total Files

    20

    Last publish

    Collaborators

    • annarchy