Vue Quasar Backtop

安装

npm install q-backtop

<template>
  <q-backtop />
</template>

<script>
import { QBacktop } from 'q-backtop'
export default {
  components: {
    QBacktop
  }
}
</script>

<q-backtop :reverse="true" position="top-right" :scroll-offset="1000" icon="vertical_align_bottom" text="直达底部" />

参数	类型	默认	说明
scroll-offset	int	200	滚动偏移量，从该位置开始在页面上显示该组件
reverse	boolean	false	反向（直达底部）
right	int	20	距离边界水平距离
bottom	int	20	距离边界垂直距离
position	string	bottom-right	组件位置：top-right，top，right，bottom，left，......
round	boolean	true	是否圆形
icon	string	vertical_align_top	图标
color	string	primary	颜色
glossy	boolean	false	光泽效果
text	string	返回顶部	鼠标悬停提示

当 reverse 为 true 时，为反向效果，页面将滚动到底部，此时可修改参数：position，scroll-offset，icon，text 实现更好显示效果。