vue-simple-scroll-up v0.1.5

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]

Demo

See demo.

Getting Started

Install via npm

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

Import

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

Usage

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 */
}

Props

Events

Contributing

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

Inspired by Instagram, Linkedin, Reddit etc. scroll to refresh buttons

License

MIT