携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情 >>
[锚点定位]
点击相应的按钮，页面滚动到相应的位置，目前我知道实现该功能的方式有两种：
- 使用a标签定位
- 使用js模拟锚点定位
[使用a标签定位]
这是一种常见的定位方式，它有两种实现方式：
- 通过href属性链接到指定元素的id 2.另一种是添加一个 a 标签，再将 href 属性链接到这个 a 标签的 name 属性
<a href="#view1">按钮1</a>
<a href="#view2">按钮1</a>
<div id="view1">视图1</div>
<div><a name="view2">视图2</a></div> 这种定位方式很简单，支持任意标签的定位，但是a标签的定位会改变路由的hash，如果有相关路由会进行路由跳转
[使用js模拟锚点定位]
通过js获取元素的scrollTop值，使其滚动到指定的位置，就能实现锚点定位效果，这里的tab切换选项，用到是的element-ui的el-tabs组件，具体实现如下：
代码语言：javascript复制<!-- html -->
<el-tabs v-model="activeName" type="card" @tab-click="tabClick">
<tab-pane :label="item.name" :name="item.key" v-for="item in tabList" :key="item.key"></tab-pane>
</el-tabs>
<!-- js -->
methods:{
//获取当前元素的offsetTop
getOffsetTop(obj) {
let offsetTop = 0;
while (obj != window.document.body && obj != null) {
offsetTop = obj.offsetTop;
obj = obj.offsetParent;
}
return offsetTop;
},
<!--锚点点击事件-->
<!--fixedHeight 滚动的位置上方固定的高度-->
tabClick(e) {
let _this = this;
//获取当前选中的index以便后面滚动高亮
this.index = parseInt(e.index);
//给定一个标识，锚点事件不触发滚动
this.isScroll = false;
this.isChange = false;
//获取当前选中元素的top值（给元素绑定对应的ref值）
let offsetTop = this.getOffsetTop(this.$refs[this.activeName]);
let scrollTop = offsetTop - this.fixedHeight;
window.scrollTo({
top: scrollTop
});
}不得不提的一个方法就是scrollIntoView，Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内，同时还支持动态效果，但是不支持配置滚动到距离顶部的距离，会出现遮罩现象，但是很适合做会到顶部的功能
[性能优化]
页面中读取属性会导致页面reflow（下次会对导致页面reflow和repaint 的操作做一个总结），过度的reflow会导致页面性能下降，所以我们应该尽量减少reflow的次数，以便给用户更好的体验。 如果产品可以接受效果有延迟，就可以使用节流函数控制在一定时间内只执行一次函数（节流函数可以使用lodash.js 封装好的 throttle 方法）
