[锚点定位]
点击相应的按钮，页面滚动到相应的位置，目前我知道实现该功能的方式有两种：
使用 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 组件，具体实现如下：
<!-- 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 方法）
评论