接上篇文章：
在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚点进行页面dom定位，但是这个demo在ios中运行存在兼容性问题,滑动页面时使用position:absolute定位的dom会出现跳动现象，待有时间再解决这个bug。好了，开始本篇内容部分：本篇内容是在上篇内容的基础上二次开发而来，实现了双向定位，当页面上下滑动到某个位置时，对应的锚点会出现高亮。看一下运行效果，还阔以吧~
为了把这个问题说清楚，我下面分4个小节分别介绍
1.找到定位坐标在vue中使用scrollTop这个属性总是失败的很彻底，所以这次压根就不在考虑使用这个玩意儿。我首先在需要滑动的内容区域找到一个定位坐标，这个参考坐标需要满足两点要求：①这个坐标需要可以在页面中上下滑动这个坐标需要在滑动的内容区域②这个坐标需要有个id通过这个id，在滑动过程中可以实时监听到这个坐标滑动到的位置，当然也可以不是id，只要能得到这个dom就行我在这个demo中选择的定位坐标是 id="apply1" 的div
找到定位坐标，下面就开始监听页面滚动了，通过滚动页面我们看看这个定位坐标的变化值。
2.监听页面滚动
监听事件写在 mounted 中，至于为什么写在这里自行去了解mounted() {window.addEventListener("scroll", this.handleScroll, true);}, 这里触发了handleScroll()事件，这个事件定义在methods:中
methods: {handleScroll(el) {},}, 3.坐标位置计算
通过在页面滚动过程中，实时计算得到定位坐标点相对于可视屏幕顶部的高度值
代码如下：handleScroll(el) {let _pos = document.getElementById("apply1").getBoundingClientRect().top;console.log('top',_pos);}, 在浏览器中运行一下，看能不能正常得到这个值：
可以看到这个值根据页面的滚动在实时变化，ok~到这里就是万事俱备，只欠东风了。
我们只要的到这个值，通过计算值的区域范围就可以给锚点进行高亮显示了。此外我还想再多说两句，在这里我用到了这个方法：getBoundingClientRect()这个方法在这里做么子内？Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
浏览器兼容行：
参考：
4.锚点高亮效果通过得到的这个值，接下来怎么进行锚点高亮，我想你应该知道了吧。下面是我这个demo中使用的高亮方法methods: {handleScroll(el) {let _pos = document.getElementById("apply1").getBoundingClientRect().top;if (-88 < _pos) {this.appleNumber = 1;}if (_pos < -150) {this.appleNumber = 2;}if (_pos < -300) {this.appleNumber = 3;}if (_pos < -460) {this.appleNumber = 4;}if (_pos < -780) {this.appleNumber = 5;}if (_pos < -930) {this.appleNumber = 6;}if (_pos < -1090) {this.appleNumber = 7;}if (_pos < -1130) {this.appleNumber = 8;}},}, 锚点html代码：
划个重点：
1.选取定位坐标
2.监听页面滚动，获取定位坐标相对于屏幕顶部的高度值3.高亮效果触发