A Scroll Back To Top Button in Vue.js

by Vue.js Examples

vue-elevator

A wrapper of elevator.js in Vue.

View demo Download Source

Installation

npm i -D vue-elevator

Usage

For standalone version

<script src="/dist/vue-elevator.browser.js"></script>

For vue-cli user

import { VueElevator } from 'vue-elevator'

Vue.component('VueElevator', VueElevator)

Sample

<template>
  <div id="app">
    <VueElevator :word="word" :duration="duration" :mainAudio="mainAudio" :endAudio="endAudio"></VueElevator>
  </div>
</template>

export default {
  ...
  data () {
    return {
      // Replace word, duration, mainAudio and endAudio setting as you want.
      // If default is what you like, just don't use related key-value pair and ignore it.
      word: "Go to Top",
      duration: 4000,
      mainAudio: "http://tholman.com/elevator.js/music/elevator.mp3",
      endAudio: "http://tholman.com/elevator.js/music/ding.mp3",
    }
  }
}

GitHub