Simple Scroll To Top

Simple and lightweight 'back to top' Vue.js component which scrolls up smoothly when clicked.

Can be used also to refresh data to load newest contents using scrolledOnTop event.

Inspired by Instagram, Linkedin, Reddit etc. scroll to refresh button. [Images]

See demo.

npm i vue-simple-scroll-up --save

Import for global usage

import Vue  from 'vue'
import scrollUp  from 'vue-simple-scroll-up'

Vue.use(scrollUp)
...

Or on a single component

import scrollUp from 'vue-simple-scroll-up'
...
},
components: {
  'vue-scroll-to-top': scrollUp
}
...

Add this into your files:

<vue-scroll-to-top text="Back to top" :visibleY="1200" :duration="1000"></vue-scroll-to-top>

To trigger scrolledOnTop event:

<vue-scroll-to-top text="Back to top" @scrolledOnTop="yourReloadFunction()"></vue-scroll-to-top>

Overwrite this css properties to change button style:

.vue-scroll-button{
  background-color: #4CAF50; /* button background color */
  color: white; /* button text color */
}
.vue-scroll-button:hover{
  box-shadow: 0 12px 14px -6px #4CAF50; /* button shadow */
}

Finding bugs, sending pull requests or improving the docs - any contribution is welcome and highly appreciated.

MIT