https://github.com/runkids/vue-scroll-up
:cyclone: A scroll to top component for Vue 3
https://github.com/runkids/vue-scroll-up
button-animation component scroll scroll-to-top vue vue3
Last synced: 4 months ago
JSON representation
:cyclone: A scroll to top component for Vue 3
- Host: GitHub
- URL: https://github.com/runkids/vue-scroll-up
- Owner: runkids
- License: mit
- Created: 2018-07-31T15:56:08.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T01:26:31.000Z (over 3 years ago)
- Last Synced: 2025-10-03T09:31:14.132Z (9 months ago)
- Topics: button-animation, component, scroll, scroll-to-top, vue, vue3
- Language: JavaScript
- Homepage: https://github.com/runkids/vue-scroll-up
- Size: 2.46 MB
- Stars: 10
- Watchers: 1
- Forks: 5
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-scroll-up
[](https://vuejs.org/) [](https://www.npmjs.com/package/vue-scroll-up) [](https://www.npmjs.com/package/vue-scroll-up) [](https://www.npmjs.com/package/vue-scroll-up) [](https://github.com/runkids/Vue-Scroll-Up/blob/master/LICENSE)
> Scroll up component for Vue 3.
## Installation
Get from npm / yarn:
```js
npm i vue-scroll-up@next
```
```js
yarn add vue-scroll-up@next
```
[👉 Vue 2 version check here](https://github.com/runkids/vue-scroll-up/tree/master/VUE2_README.md)
## Usage
Use inside your app:
``` js
import VueScrollUp from 'vue-scroll-up'
export default {
components: {
VueScrollUp,
}
}
```
Or
``` js
import VueScrollUp from 'vue-scroll-up'
const app = createApp({});
app.component(VueScrollUp.name, VueScrollUp);
```
##### HTML
```html
```
##### Use Slot
```html
{{ isTop ? '👇' : '👆' }}
{{ pointer }}
```
##### Design your scroll button [👉 See example here](https://github.com/runkids/vue-scroll-up/tree/master/example/app.vue)
1. Add your custom class name
```html
```
2. Add CSS
```css
.my-scroll-up {
align-items: center;
background-color: rgba(0, 0, 0, 0.658);
border: rgba(0, 0, 0, 0.658);
border-radius: 100px;
bottom: 100px;
color: white;
cursor: pointer;
display: flex;
height: 55px;
justify-content: center;
position: fixed;
right: 10px;
width: 55px;
z-index: 99;
}
.my-scroll-up::after {
border: 2px solid white;
border-radius: 10px;
content: '';
display: block;
height: 25px;
margin: 0 auto;
width: 10px;
}
.my-scroll-up::before {
animation: 2s top infinite;
border: 1px solid white;
border-radius: 10px;
content: '';
display: block;
height: 10px;
left: 49%;
position: absolute;
width: 0;
}
@keyframes top {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media screen and (max-width: 450px) {
.vue-scroll-up {
bottom: 10px;
transform: translateX(5px) scale(0.7);
}
}
```
## Attributes
| Parameter | Type | Defaults | Description |
| ------------ | ------------ | ------------ | ------------ |
| tag | `string` | `span` | Default render element.|
| custom-class | `string` | `vue-scroll-up` | Custom your class name.|
|scroll-duration | `number` | `200` | Page to top speed.|
| scroll-y | `number` | `250` | Show button when scrollY equals a number.|
| always-show | `boolean` | `false` | Always show button even scroll to top.|
## Slot
| Name | Description |
| ------------ | ------------ |
| isTop | Scroll button is top.|
| pointer | Value of scroll y.|