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;
  }
}
相关推荐
灰海3 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子13 分钟前
深入理解TCP协议
前端·javascript·面试
万少15 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲29 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子7 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js