better-scroll（二）做左侧列表滚动

这里可能有你想要的好东西

如果想做此图中的效果 即点击首页五的时候左侧列表首页五滚动到top头部下那请看一下如下代码:
在这里写代码前我们先做一些思考，为什么点首页五的话就会滚动到之前首页一的位置。它又是怎么滚动的呢。
在这里我们使用offsetTop和scrollTop：ps(我也是第一次用还是查的资料 大佬们轻喷)
offsetTop:当前元素顶端距离父元素顶端距离,鼠标滚轮不会影响其数值.

scrollTop:当前元素顶端距离窗口顶端距离,鼠标滚轮会影响其数值.
我们想要点击的li滚动到top下，首先我们要获取li距离父级元素顶端有多少距离，那么li的父级是ul
此时看上面效果图的话会发现上面top的存在,它的高度为50px，那么ul的话在他的下面所以此地方分而二部分。

此时ul也在top的下面li也在所以第一个li顶部的距离离ul顶部的距离是一样的

Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了this.$refs.xxx 访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。

我们通过click事件获取li的坐标 且又通过 $refs.myli获取到li 此刻我们就能通过 myli[index]获取li的元素位置。然后通过 li.offsetTop方法获取li距离父级元素顶部的高度。
在我们初始化better-scroll的时候我们可以接收到一个对象。这个对象有很多属性与方法，其中有一个
scrollTo的属性：
使用方法如下：scrollTo(x, y, time, easing)
滚动到某个位置，x,y 代表坐标，time 表示动画时间，easing 表示缓动函数
scroll.scrollTo(0, 500)
我们可以通过获取li的高度来让它滚到到特定位置

我在这里用aBScroll获取该构造函数的对象。
按照上面scrollTo()方法的使用规则我们写下如下代码:this.aBScroll.scrollTo(0,lisetTop.offsetTop,300);
0代表x轴,第二个参数为y轴，第三个参数为动画时间。此时y轴为整数：比如点第二个li的时候他的值为50px，那么它会从自身位置向下滚动50px,此时我们是想让点击的li始终为第一个li所以我们给这个li设为-值。this.aBScroll.scrollTo(0, -lisetTop.offsetTop, 300);此时我们的滚动效果已做完。