@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

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