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