vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

// 获取滚动dom元素
 this.scrollBox = document.getElementById('scrollBox')
 const jump = jQuery('.do-jump')
 const topArr = [] for (let i = 0; i < jump.length; i++) {
  topArr.push(jump.eq(i).position().top)
 }
 // 监听dom元素的scroll事件
 this.scrollBox.addEventListener('scroll', () => {
  const current_offset_top = that.scrollBox.scrollTop
  for (let i = 0; i < topArr.length; i++) {
  if (current_offset_top <= topArr[i]) { // 根据滚动距离判断应该滚动到第几个导航的位置
   that.activeMenu = i
   break
  }
  }
 }, true)

这里需要注意addEventListener里有三个参数：’scroll’ 、function、true

以上这篇vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。