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