vue 实现左侧导航栏,右侧锚点定位滚动到指定位置(超简单方法)

项目截图:

实现方法:

点击左侧菜单根据元素id定位到可视内容区域。

浏览器原生提供了一种方法scrollIntoView

通过scrollIntoView方法可以把元素滚动到可视区域内。

behavior: "smooth"是指定滚动方式为平滑效果。

具体代码如下:

html 复制代码
<div class="main">
            <div class="sidebar">
              <el-menu default-active="1" class="nav" @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                  <template slot="title">
                    <span>应用API</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item
                      v-for="(item, index) in sections"
                      :key="item.name"
                      :index="index"
                      @click="changeMenu(item)"
                      >{{ item.name }}</el-menu-item
                    >
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </div>
            <div class="content">
              <div id="Start" class="content-item">
                <h2 class="name">快速开始</h2>
              </div>
              <div id="UpDate" class="content-item">
                <h2 class="name">检查更新</h2>
              </div>
              <div id="DownLoad" class="content-item">
                <h2 class="name">下载应用</h2>
              </div>
              <div id="History" class="content-item">
                <h2 class="name">更新历史</h2>
              </div>
            </div>
          </div>
javascript 复制代码
data(){
    return {
        sections: [
        {
          name: '快速开始',
          value: 'Start'
        },
        {
          name: '检查更新',
          value: 'UpDate'
        },
        {
          name: '下载应用',
          value: 'DownLoad'
        },
        {
          name: '更新历史',
          value: 'History'
        }
      ]
    }
},
methods:{
    changeMenu(item) {
      const el = this.$el.querySelector(`#${item.value}`);
      if (el) {
        el.scrollIntoView({ behavior: 'smooth' });
      }
    }
}

css样式

css 复制代码
.main {
  display: flex;
  .sidebar {
    width: 260px;

    .nav {
      height: 100%;
    }
  }
  .content {
    flex: 1;
    height: 78vh;
    overflow-y: auto;
    padding: 20px 30px;
  }
  .content-item {
    margin-bottom: 30px;

    &-p {
      padding: 2px 0;
    }
  }
  .content-item-name {
    font-weight: bold;
    padding: 30px 0 20px 0;
  }
  .name {
    margin-bottom: 10px;
  }
}
相关推荐
袁煦丞4 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆5 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记15 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆15 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360216 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军17 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句19 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜19 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI20 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课21 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试