vue+导航锚点联动-滚动监听和点击平滑滚动跳转的示例分析-创新互联

这篇文章主要为大家展示了“vue+导航锚点联动-滚动监听和点击平滑滚动跳转的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue+导航锚点联动-滚动监听和点击平滑滚动跳转的示例分析”这篇文章吧。

创新互联是一家专业提供绵竹企业网站建设,专注与成都做网站、成都网站制作、H5开发、小程序制作等业务。10年已为绵竹众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

最终效果如下：（注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内）-chrome

vue+导航锚点联动-滚动监听和点击平滑滚动跳转的示例分析

完成这个功能需要注意：

1、点击导航平滑滚动到导航内容处

2、div内滚动时当前导航需要做响应

代码如下：

1、html结构（因为从项目里截取代码数据内容就不贴出来了，不算难点，这个可以根据自己的项目进行调整，相应的方法和类名别弄错就行）


  全部应用
  
   {{ item.name }}

需要说明的数据：activeMenu-当前导航序号，scrollBox-需要在里面滚动的元素即设为overflow-y:scroll的父元素div

// 跳转 jump(index) { this.activeMenu = index // 当前导航 const jump = jQuery('.do-jump').eq(index) const scrollTop = jump.position().top + this.scrollBox.scrollTop // 获取需要滚动的距离 // Chrome this.scrollBox.scrollTo({ top: scrollTop, behavior: 'smooth' // 平滑滚动 }) }

这里有两点需要说明：一是因为我vue项目里装了jquery所以这里直接用了jquery的position().top来获取元素到父元素的距离，如果项目里没装jquery需要把这里换成js的方法来获取元素到父元素的距离（万事有Google和度娘），二是点击之后需要滚动的距离计算时别忘了加上当前div已经滚动的距离即已经被卷起的高度

// 获取滚动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+导航锚点联动-滚动监听和点击平滑滚动跳转的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

重庆分公司，新征程启航

vue+导航锚点联动-滚动监听和点击平滑滚动跳转的示例分析-创新互联

其他资讯