超详细Vue实现导航栏绑定内容锚点+滚动动画

最新推荐文章于 2025-04-01 12:04:04 发布

前端妹妹

最新推荐文章于 2025-04-01 12:04:04 发布

阅读量3.5k

点赞数

分类专栏： vue 文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/weixin_44029605/article/details/124149644

版权

本文详细介绍了如何在Vue项目中实现导航栏与内容锚点的绑定，并添加平滑滚动动画效果，内容包括锚点定位的原理和Vue中实现这一功能的具体步骤，同时参考了相关文章和评论进行优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <!-- 内容区域 -->
    <div class="content">
      <div>content-0</div>
      <div>content-1</div>
      <div>content-2</div>
      <div>content-3</div>
      <div>content-4</div>
    </div>
    <!-- 导航区域 -->
    <ul class="navs">
      <li :class="{ active: active === 0 }" @click="scrollTo(0)">content-0</li>
      <li :class="{ active: active === 1 }" @click="scrollTo(1)">content-1</li>
      <li :class="{ active: active === 2 }" @click="scrollTo(2)">content-2</li>
      <li :class="{ active: active &#