vue点击按钮滚动到顶部

Vue-go-top (vue-go-top)

Scroll to page top button, Vue.js component.

滚动到页面顶部按钮Vue.js组件。

安装 (Install)

浏览器 (Browser)

<script src="vue.js"></script>
<script src="vue-go-top.min.js"></script>

npm (npm)

npm install --save @inotom/vue-go-top

用法 (Usage)

浏览器 (Browser)

<div id="app">
  <go-top></go-top>
</div>

<script src="vue.js"></script>
<script src="vue-go-top.min.js"></script>
<script>
Vue.use(GoTop);
new Vue({
  el: '#app'
});
</script>

证监会 (SFC)

<template>
  <go-top></go-top>
</template>

<script>
import GoTop from '@inotom/vue-go-top';

export default {
  components: {
    GoTop
  }
}
</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

名称	类型	默认值	描述
:size	Number	70	宽度/高度像素大小
:right	String ， Number	50	右边距
:bottom	String ， Number	100	底边距
:bottom-gap	String ， Number	0	底边距
:z-index	Number	1000	Z索引大小
fg-color	String	#ffffff	文字颜色
bg-color	String	#ffc966	背景颜色
:radius	String ， Number	50%	边界半径大小
weight	String	normal	箭头线宽
ripple-bg	String	rgba(255, 255, 255, .5)	涟漪动画颜色
:boundary	Number	200	元素显示的最高位置
:max-width	Number	640	媒体查询最大宽度(px)
src	String	null	图片网址
alt	String	``	图像的替代文字
:has-outline	Boolean	true	聚焦时显示轮廓

翻译自: https://vuejsexamples.com/scroll-to-page-top-button-with-vue-js/

vue点击按钮滚动到顶部