https://github.com/anas-araid/vue-simple-scroll-up
simple and lightweight "back to top" Vue.js component which scrolls up smoothly when clicked.
https://github.com/anas-araid/vue-simple-scroll-up
library npm pull-to-refresh refresh reload scroll scroll-to-top scrolling scrolls vu-simple-scroll-up vue vue-component vue-simple-scroll
Last synced: about 1 month ago
JSON representation
simple and lightweight "back to top" Vue.js component which scrolls up smoothly when clicked.
- Host: GitHub
- URL: https://github.com/anas-araid/vue-simple-scroll-up
- Owner: anas-araid
- License: mit
- Created: 2020-08-06T15:10:20.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-10-14T18:56:09.000Z (over 5 years ago)
- Last Synced: 2025-05-24T04:43:42.653Z (about 1 year ago)
- Topics: library, npm, pull-to-refresh, refresh, reload, scroll, scroll-to-top, scrolling, scrolls, vu-simple-scroll-up, vue, vue-component, vue-simple-scroll
- Language: Vue
- Homepage:
- Size: 113 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
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]](https://github.com/asdf1899/vue-simple-scroll-up#inspired-by-instagram-linkedin-reddit-etc-scroll-to-refresh-buttons)
## Demo
See [demo](https://anasaraid.me/vue-simple-scroll-up-example/).
# Getting Started
## Install via npm
```bash
npm i vue-simple-scroll-up --save
```
## Import
Import for global usage
```javascript
import Vue from 'vue'
import scrollUp from 'vue-simple-scroll-up'
Vue.use(scrollUp)
...
```
Or on a single component
```javascript
import scrollUp from 'vue-simple-scroll-up'
...
},
components: {
'vue-scroll-to-top': scrollUp
}
...
```
## Usage
Add this into your files:
```html
```
To trigger *scrolledOnTop* event:
```html
```
Overwrite this css properties to change button style:
```css
.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](https://github.com/asdf1899/vue-simple-scroll-up/blob/master/LICENSE.md)