一个人的时候,怎样通关?

一个人的时候，怎样通关？即使再承受不住，实际上到后来大家总是能你走来。

序言

前几天面试时，招聘者规定另附一个检测著作，给了一个网址（coding.qq.com/home/ ，没有错便是这个软件） 要我还原这其中的交互效果，其中包括一块涉及了锚点定位。由于我以前也没干过这种作用，就感觉有意思的，随后也随手记录一下，如果能帮一些同学们，那么就最好不过了~

文章正文

tip: 这一demo用的都是vue3加pinia构建的，感兴趣的同学们，demo源代码放在这里哦[~]

第一步 定ps钢笔

给必须定位部件再加上id，后边搜索原素需要使用哦（敲重点）

<template>
  <div class="main-container w" id="main">
    <!-- 状态栏 -->
    <Notice />
    <!-- 大型赛事会员专区 -->
    <Activity />
    <!-- 程序编写好帮手 -->
    <CodingTool id="labs" />
    <!-- 趣味性课程内容，优秀教师名人带你学 -->
    <Interesting id="courses" />
    <!-- 精彩纷呈著作，融会贯通 -->
    <Production id="project" />
    <!-- 扣叮动态性 -->
    <News id="codingnews" />
    <!-- 校园风采 -->
    <School id="cocase" />
    <!-- 合作方 -->
    <Partner id="cooperator" />
  </div>
</template>

第二步 根据导航条让ps钢笔运动起来！

实际上这一步，是先根据导航条的js点击事件和ps钢笔开展连动，导航条其实就是下面的东西

这一步的关键要素有如下2个

1. 先使用element.scrollTo方式（使页面翻转到给出元素特定经纬坐标）界定一个锚点定位翻转方式
为了能让页面翻转到给出原素（其实就是ps钢笔）的特定经纬坐标，接下来我们运用了这一srollTo用这种方法，如何使用呢，我在mdn截屏出来了，可以参考一下参照，操作方法非常简易

我编码里使用的options的参数方式，详细编码如下所示： 用这种方法里需要注意的问题点：

parent提的是锚点定位原素可翻转父级原素，在这里我还拿着外层,id为app元素，大伙儿可以根据实际情况取不一样可翻转父级原素

scrollTo(offsetTop) {
  const parent = document.querySelector('#app')
  parent.scrollTo({
    top: offsetTop,
    behavior: 'smooth'
  })
}

2. 获得ps钢笔的offsetTop(间距父级元素顶端间距)
上边己经界定好啦锚点定位的翻转方式，只需向里边传到一个主要参数（ps钢笔间距父元素的顶部距离offsetTop）就能快乐地翻转啦。

获得ps钢笔的offsetTop非常简单，应用document.querySelector取得相匹配ps钢笔元素，再取在其中offsetTop的基础属性就行啦，编码如下所示：

anchorPosition(anchor) {
  const element = document.querySelector(anchor)
  this.scrollTo(element.offsetTop)
}

那样导航条跟ps钢笔点一下联动的基本工具就搞定，这一步是否非常简易

接着就是稍微繁杂一丢丢的一步啦~

第三步 ps钢笔翻转时，导航条也需要跟随动哦，来而不往非礼也~

这一步，我思路是这样子的滴：

1. 在网页页面初始化后（onMounted），先取得全部ps钢笔的offsetTop，由小到大放到一个二维数组offsetTopList里便捷后边应用；

2. 监视可翻转父元素的scroll事情，撰写sroll的处理方式srollHandle；

3. 由小到大反方向遍历数组offsetTopList，用翻转时获得的offsetTop值与赋值过的值作比较，只需高于或等于赋值过的值，就结束赋值，这就是我找到的较为省力的方式（假如得到更好的方式热烈欢迎各位大佬评论留言指点一下，我悄悄学习一下）；

4. 完毕赋值的时候注意要纪录当年的ps钢笔哦，那样导航条才能够按照这个ps钢笔设定相对应的高亮度项。；

详细编码如下所示：

const scrollHandle = ({ target }) => {
  const curScrollTop = target.scrollTop
  let flag = true
  const len = offsetTopList.length
  for (let i = len - 1; i >= 0; i--) {
    const curReference = offsetTopList[i].offsetTop // 现阶段标准值
    if (flag && curScrollTop >= curReference - 10) {
      flag = false
      sidebarStore.setAnchor(offsetTopList[i].anchor)
    }
  }
}

总结

到这儿，所以关于锚点定位的关键因素就已经完成，在其中待改善的点是翻转时处理办法要加下节流阀解决，要不然还挺耗费特性的。没干过又感兴趣的朋友可以试试哦~

文中关键词
1. scrollTo 2. offsetTop

demo源代码在这里! 溜了溜了