Vue中实现锚点

人这辈子一共会死三次。
第一次是你的心脏停止跳动，那么从生物的角度来说，你死了；
第二次是在葬礼上，认识你的人都来祭奠，那么你在社会上的地位就死了；
第三次是在最后一个记得你的人死后，那你就真的死了。

说明

最近进行的一个vue项目，使用vue-router实现页面跳转。

由于有页面需要使用锚点定位，刚开始使用html中传统锚点定位方法，也就是利用a标签的href属性值与dom元素的id值实现的，例如：

  <a href="#abstract">概述</a>
  <h3 id="abstract">概述</h3>

结果是当点击链接a后，直接就跳转到了一个新的页面，而不是预期中指定的dom元素。

后来查阅文档查资料发现，传统的锚点定位方式在使用了vue-router时是不可行的。仔细观察不难发现，锚点定位的本质就是修改容器的滚动高度.

所以呢，锚点定位可以模拟成修改页面卷动值，卷动值是scrollTop。而如何获取卷动值可通过offsetTop来获取。

offsetTop与scrollTop的区别

属性	说明
scrollTop	对象的最顶部到对象在当前窗口显示的范围内的顶边的距离。即在出现了纵向滚动条的情况下，滚动条拉动的距离。是指某个可滚动区块向下滚动的距离，比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10，这个属性的值是可读写的，且不需要设置position
offsetTop	则是元素的上边框与父元素的上边框的绝对距离，不能对其进行赋值

具体实现

<!-- 跳转锚点  -->
<a href="javascript:void(0)" @click="goAnchor('production')">
    <el-menu-item index="7" class="last-menu">作品</el-menu-item>
</a>
<!-- 跳转目的地  -->
<div class="production-box" id="production">
    <span class="item-name">作品</span>
</div>

在html代码中需要把a标签的href设为不进行任何操作，否则还会跳页

goAnchor(id) {
    var anchor = document.getElementById(id);
    // chrome
    document.body.scrollTop = anchor.offsetTop;
    // firefox
    document.documentElement.scrollTop = anchor.offsetTop;
    // safari
    window.pageYOffset = anchor.offsetTop;
}