用JS怎样实现锚点定位功能？

发布时间：2022-02-25 13:46:35 所属栏目：语言来源：互联网

导读：这篇文章给大家分享的是用JS实现锚点定位的内容，小编觉得挺实用的，因此分享给大家做个参考，下文是实现了一个简单的滚动触发锚点高亮，以及点击锚点触发滚动的功能，接下来一起跟随小编看看吧。这里要注意的是，如果是获取浏览器的滚动高度，各个浏览器有

这篇文章给大家分享的是用JS实现锚点定位的内容，小编觉得挺实用的，因此分享给大家做个参考，下文是实现了一个简单的滚动触发锚点高亮，以及点击锚点触发滚动的功能，接下来一起跟随小编看看吧。

    这里要注意的是，如果是获取浏览器的滚动高度，各个浏览器有所差异，使用以下几种方式：
    Chrome： document.body.scrollTop
    Firefox： document.documentElement.scrollTop
    Safari： window.pageYOffset
    我这里是局部元素滚动，因此稍有差异。先附上html及css代码块：

    scroll-content为滚动区域， operation-btn为控制锚点行为的按钮。

<template>
  <div class="anchor-point">
    
    <div class="scroll-content" @scroll="onScroll">
      <div class="scroll-item" style="height: 500px;background: #3a8ee6;">一层</div>
      <div class="scroll-item" style="height: 500px;background: red;">二层</div>
      <div class="scroll-item" style="height: 500px;background: #42b983">三层</div>
      <div class="scroll-item" style="height: 1000px;background: yellow;">四层</div>
    </div>
    
    <div class="operation-btn">
      <div v-for="(item, index) in ['一层','二层','三层','四层']" :key="index" @click="jump(index)"
           :style="{background: activeStep === index ? '#eeeeee' : '#ffffff'}">{{item}}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .anchor-point {
    flex-basis: 100%;
    display: flex;
    overflow: hidden;
    .scroll-content {
      height: 100%;
      width: 90%;
      overflow: scroll;
    }
    .operation-btn {
      width: 10%;
      height: 100%;
    }
  }
</style>
    通过监听滚动事件，高亮显示锚点按钮

    这里是通过遍历滚动项，判断滚动条滚动距离是否大于当前项的可滚动距离(即距离其offsetParent顶部的距离，这里是body)

// 滚动触发按钮高亮
onScroll (e) {
  let scrollItems = document.querySelectorAll('.scroll-item')
  for (let i = scrollItems.length - 1; i >= 0; i--) {
    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
    let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
    if (judge) {
      this.activeStep = i
      break
    }
  }
},
    添加点击事件，根据锚点滚动至对应区域并实现平滑滚动

    这里参考网上的方法，将滚动距离细分为多个小段，并考虑向上及向下的的滚动，实现滚动的过渡动画。本来是打算使用scrollIntoView实现滚动动画，scrollIntoView在各个浏览器已经有很好的支持性，但是ScrollIntoViewOptions在浏览器的兼容性上还有问题，所以改用如下距离分割的方式。

// 点击切换锚点
jump (index) {
let target = document.querySelector('.scroll-content')
let scrollItems = document.querySelectorAll('.scroll-item')
// 判断滚动条是否滚动到底部
if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
   this.activeStep = index
}
let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop
// 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
let distance = document.querySelector('.scroll-content').scrollTop
// 滚动条距离滚动区域顶部的距离
// let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset
// 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
// 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
// 计算每一小段的距离
let step = total / 50
if (total > distance) {
   smoothDown(document.querySelector('.scroll-content'))
} else {
   let newTotal = distance - total
   step = newTotal / 50
   smoothUp(document.querySelector('.scroll-content'))
}

// 参数element为滚动区域
function smoothDown (element) {
   if (distance < total) {
     distance += step
     element.scrollTop = distance
     setTimeout(smoothDown.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
}

// 参数element为滚动区域
function smoothUp (element) {
   if (distance > total) {
     distance -= step
     element.scrollTop = distance
     setTimeout(smoothUp.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
}

// document.querySelectorAll('.scroll-item').forEach((item, index1) => {
//   if (index === index1) {
//     item.scrollIntoView({
//       block: 'start',
//       behavior: 'smooth'
//     })
//   }
// })
}

（编辑：濮阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!