在vue项目使用原生js做锚点平滑滚动

最新推荐文章于 2024-07-29 16:50:17 发布

冰棱的血腥

最新推荐文章于 2024-07-29 16:50:17 发布

阅读量5.9k

点赞数

分类专栏：学习文章标签：前端 js 锚点滚动

本文链接：https://blog.csdn.net/qq_39234685/article/details/83179110

版权

本文介绍了如何在Vue项目中利用原生JavaScript实现锚点点击时页面平滑滚动的效果，无需依赖外部插件。通过提供部分关键代码示例，展示了从点击左侧菜单到右侧内容平滑滚动的过程。

摘要由CSDN通过智能技术生成

如题所述，想必大家经常在vue项目中要用到锚点点击页面平滑滚动的效果，网上也有很多的插件，今天分享一个原生js简单实现的方法。
在这里插入图片描述
如图所示，我的需求是点击左边的菜单，右边内容平滑滚动到相应内容，下面贴出部分代码：

<div class="menu">
             <div class="options" :class="[currents==1?'active':'']" @click="toScroll(1)">系统</div>
             <div class="options" :class="[currents==2?'active':'']" @click="toScroll(2)">规格</div>
             <div class="options" :class="[currents==3?'active':'']" @click="toScroll(3)">网络</div>
             <div class="options" :class="[currents==4?'active':'']" @click="toScr