anas-araid/vue-simple-scroll-up

simple and lightweight "back to top" Vue.js component which scrolls up smoothly when clicked.

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]

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

Property	Type	Default Value	Description
text	String	'Back to top'	Button description.
visibleY	Number	400	Show button when scrollY equals to visibleY value.
duration	Number	800	Scrolling animation duration.

Events

Name	Description
scrolledOnTop	Triggered when scrolling finished (can be used to refresh content)

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