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>
相关推荐
卡兰芙的微笑10 分钟前
get_property --Cmakelist之中
前端·数据库·编辑器
覆水难收呀12 分钟前
三、(JS)JS中常见的表单事件
开发语言·前端·javascript
猿来如此呀20 分钟前
运行npm install 时,卡在sill idealTree buildDeps没有反应
前端·npm·node.js
hw_happy25 分钟前
解决 npm ERR! node-sass 和 gyp ERR! node-gyp 报错问题
前端·npm·sass
FHKHH30 分钟前
计算机网络第二章:作业 1: Web 服务器
服务器·前端·计算机网络
视觉小鸟1 小时前
【JVM安装MinIO】
前端·jvm·chrome
二川bro1 小时前
【已解决】Uncaught RangeError: Maximum depth reached
前端
qq22951165023 小时前
python毕业设计基于django+vue医院社区医疗挂号预约综合管理系统7918h-pycharm-flask
前端·vue.js·express
WebGIS皮卡茂3 小时前
【数据可视化】Arcgis api4.x 热力图、时间动态热力图、timeSlider时间滑块控件应用 (超详细、附免费教学数据、收藏!)
javascript·vue.js·arcgis·信息可视化
八了个戒3 小时前
Koa (下一代web框架) 【Node.js进阶】
前端·node.js