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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-14T18:56:09.000Z (over 4 years ago)
• Last Synced: 2024-11-15T08:17:13.467Z (3 months 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)