elementui-plus实现锚点功能

效果:点击导航栏菜单,定位到指定的地方

适用于单界面操作

javascript 复制代码
<template>  
  <el-menu>  
    <el-menu-item index="1" @click="scrollToAnchor('section1')">Section 1</el-menu-item>  
    <el-menu-item index="2" @click="scrollToAnchor('section2')">Section 2</el-menu-item>  
  </el-menu>  
  
  <div style="height: 1000px;"> <!-- 假设页面有足够的高度以展示滚动效果 -->  
    <h2 id="section1">Section 1</h2>  
    <!-- 更多内容 -->  
    <h2 id="section2">Section 2</h2>  
    <!-- 更多内容 -->  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    scrollToAnchor(anchorId) {  
      const element = document.getElementById(anchorId);  
      if (element) {  
        element.scrollIntoView({ behavior: 'smooth' });  
      }  
    }  
  }  
}  
</script>
相关推荐
WebInfra3 分钟前
Rspack 2.1 发布:React Compiler 提速 10 倍!
前端
李明卫杭州8 分钟前
CSS 媒体查询详解:一文掌握响应式设计的核心技术
前端
lichenyang45344 分钟前
从 H5 按钮到 OpenHarmony 能力调用:我如何理解 ASCF 的运行链路
前端
下家1 小时前
我放弃了 Vue/React,选择自研框架
前端·前端框架
Asize2 小时前
HTML5 Canvas 基础:从按帧动画到 ECharts 数据可视化
前端·javascript·canvas
默_笙2 小时前
🎄 后端给我一堆扁平数据,我 10 行代码把它变成了树
前端·javascript
Mahut2 小时前
我用 Electron + FFmpeg 做了一个本地视频处理工作站 ClipForge
前端·ffmpeg·electron
前端Hardy2 小时前
又一个 AI 神器火了!
前端·javascript·后端
锋行天下2 小时前
我试图优化 Vite 的拆包,结果首屏慢了 10 倍
前端·vue.js·架构
PBitW2 小时前
GPT训练我的第二天,我表示不过如此!!!😕😕😕
前端·javascript·面试