Vue.js简单的滚动到顶部组件

Vue.js简单的滚动到顶部组件
插件名称 vue-simple-scroll-up
发布时间 2020年8月13日
插件作者 asdf1899

一个简单的滚动到顶部组件,单击后可平滑地将页面滚动回到顶部。

安装和下载:

# NPM
$ npm i vue-simple-scroll-up --save

基本用法:

1.导入并注册组件。

import scrollUp from 'vue-simple-scroll-up'
// 全局
Vue.use(scrollUp)

// 或
components: {
  'vue-scroll-to-top': scrollUp
}

2.将滚动条的顶部组件添加到您的应用程序。

<vue-scroll-to-top text="Back to top">
</vue-scroll-to-top>

3.自定义动画的持续时间。默认值:800

<vue-scroll-to-top text="Back to top" :duration="1000">
</vue-scroll-to-top>

4.自定义显示滚动条到顶部按钮的顶部距离。默认值:400

<vue-scroll-to-top text="Back to top" :visibleY="1200">
</vue-scroll-to-top>

5.当页面滚动到顶部时触发功能。

<vue-scroll-to-top text="Back to top" @scrolledOnTop="yourFunction()">
</vue-scroll-to-top>

6.覆盖滚动到顶部按钮的默认样式。

.vue-scroll-button {
  background-color: #222; 
  color: #fff;
}

.vue-scroll-button:hover {
  background-color: #333; 
}