一个vue-scrollto的基本demo

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frank_fong/article/details/87256443
<template>
<div id="app">
<ul class="menu">
<li v-scroll-to="'#a'">item 1</li>
<li v-scroll-to="'#b'">item 2</li>
<li v-scroll-to="'#c'">item 3</li>
</ul>

<div
class="content"
id="a"
>content 1</div>
<div
class="content"
id="b"
>content 2</div>
<div
class="content"
id="c"
>content 3</div>
</div>
</template>

<script>
import Vue from "vue";
import VueScrollTo from "vue-scrollto";

Vue.use(VueScrollTo, options);

//https://github.com/rigor789/vue-scrollto

let options = {
container: "body", //滚动的容器
duration: 500, //滚动时间
easing: "ease", //缓动类型
offset: 0, //滚动时应应用的偏移量。此选项接受回调函数
force: true, //是否应执行滚动
cancelable: true,
onStart: false,
onDone: false,
onCancel: false,
x: false,
y: true
};

export default {
name: "app"
};
</script>

<style>
.menu {
position: fixed;
width: 200px;
background-color: #eee;
}
.content {
width: 500px;
height: 500px;
margin-left: 300px;
margin-bottom: 50px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}
</style>
vue-scrollto 滚动组件使用：
https://github.com/rigor789/vue-scrollto
安装：npm install --save vue-scrollto

使用方法见上面demo
————————————————
版权声明：本文为CSDN博主「FrankFang7」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/frank_fong/article/details/87256443