A simple scroll to top component that smoothly scrolls the page back to the top when clicked.
Basic usage:
1. Import and register the component.
import scrollUp from 'vue-simple-scroll-up'
// globally
Vue.use(scrollUp)
// or
components: {
'vue-scroll-to-top': scrollUp
}
2. Add the scroll to top component to your app.
<vue-scroll-to-top text="Back to top"> </vue-scroll-to-top>
3. Customize the duration of the animation. Default: 800.
<vue-scroll-to-top text="Back to top" :duration="1000"> </vue-scroll-to-top>
4. Customize the distance from the top that reveals the scroll to top button. Default: 400.
<vue-scroll-to-top text="Back to top" :visibleY="1200"> </vue-scroll-to-top>
5. Trigger a function when the page is scrolled to the top.
<vue-scroll-to-top text="Back to top" @scrolledOnTop="yourFunction()"> </vue-scroll-to-top>
6. Override the default styles of the scroll to top button.
.vue-scroll-button {
background-color: #222;
color: #fff;
}
.vue-scroll-button:hover {
background-color: #333;
}
Preview:
Download Details:
Author: asdf1899
Live Demo: https://anasaraid.me/vue-simple-scroll-up-example/
Download Link: https://github.com/asdf1899/vue-simple-scroll-up/archive/master.zip
Official Website: https://github.com/asdf1899/vue-simple-scroll-up
Install & Download:
# NPM
$ npm i vue-simple-scroll-up --save