@inotom/vue-go-top
vue-go-top
Scroll to page top button, Vue.js component.
From v2.0.0, it works for Vue 3.
Demo
Install
Browser
<script src="vue.global.prod.js"></script>
<script src="https://unpkg.com/throttle-debounce@5/umd/index.js"></script>
<script src="https://unpkg.com/sweet-scroll/sweet-scroll.min.js"></script>
<script src="vue-go-top.umd.js"></script>
npm
npm install --save @inotom/vue-go-top
Usage
Browser
<div id="app">
<go-top></go-top>
</div>
<script src="vue.global.prod.js"></script>
<script src="https://unpkg.com/throttle-debounce@5/umd/index.js"></script>
<script src="https://unpkg.com/sweet-scroll/sweet-scroll.min.js"></script>
<script src="vue-go-top.umd.js"></script>
<script>
const { createApp } = Vue;
const { GoTop } = SwsVueGoTop;
createApp({
components: {
GoTop,
},
}).mount('#app');
</script>
SFC (TypeScript)
<template>
<go-top></go-top>
</template>
<script setup lang="ts">
import { GoTop } from '@inotom/vue-go-top';
</script>
Props
| name | type | defaults | description |
|---|---|---|---|
:size |
Number |
70 |
width/height pixel size |
:right |
String, Number |
50 |
margin from right |
:bottom |
String, Number |
100 |
margin from bottom |
:bottom-gap |
String, Number |
0 |
gap of bottom margin |
:z-index |
Number |
1000 |
z-index size |
fg-color |
String |
#ffffff |
text color |
bg-color |
String |
#ffc966 |
background color |
:radius |
String, Number |
50% |
border-radius size |
weight |
String |
normal |
line weight of arrow |
ripple-bg |
String |
rgba(255, 255, 255, .5) |
ripple animation color |
:boundary |
Number |
200 |
top position where the element is displayed |
:max-width |
Number |
640 |
media query max-width(px) |
src |
String |
null |
image url |
alt |
String |
`` | alternative text for image |
:has-outline |
Boolean |
true |
show outline when focus |
box-shadow |
String |
1px 1px 2px rgba(0, 0, 0, .3) |
box-shadow property |
:tabindex |
Number |
0 |
tabindex property |
License
MIT
Author
inotom
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 2.0.0 | ^3.3.11 | MIT | |
| 1.3.0 | 2.6.11 | MIT | |
| 1.2.0 | 2.6.11 | MIT | |
| 1.1.0 | 2.5.17 | MIT | |
| 1.0.2 | 2.5.17 | MIT | |
| 1.0.1 | 2.5.17 | MIT | |
| 1.0.0 | 2.5.17 | MIT |
Pre-releases (1)
| Version | Released | Vue | License |
|---|---|---|---|
| 2.0.0-beta.1 | ^3.3.11 | MIT |