Skip to content

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

License

Notifications You must be signed in to change notification settings

anas-araid/vue-simple-scroll-up

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Simple Scroll To Top

version npm npm bundle size license
logo

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