页面中元素的锚点定位

默默的成长

发布于 2022-11-02 14:31:44

1.9K0

发布于 2022-11-02 14:31:44

文章被收录于专栏：前端记录笔记前端记录笔记

携手创作，共同成长！这是我参与「掘金日新计划 · 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组件，具体实现如下：

<!-- 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 &amp;&amp; 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 方法）

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-08-09，如有侵权请联系 cloudcommunity@tencent.com 删除