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>
相关推荐
vvilkim2 分钟前
React 组件类型详解:类组件 vs. 函数组件
前端·javascript·react.js
猫了个咪丶3 分钟前
一文教你搞懂如何消除异步函数的传染性
前端
JiangJiang4 分钟前
🧠 useMemo + memo + useContext 性能优化实战:从无感重渲染到丝滑体验
前端·react.js·面试
糖墨夕5 分钟前
【3】Threejs环境光、点光源、聚光灯等常见光源类型对比
前端·three.js·canvas
汪子熙6 分钟前
使用 Trae 快速开发能生成二维码的 SAP UI5 应用
前端·trae
猪猪小铁拳9 分钟前
dva调试
前端
路上^_^21 分钟前
CSS核心笔记001
前端·css·笔记
啊吧啊吧曾小白33 分钟前
作用域、闭包与this指向问题
前端·javascript·面试
Linhieng35 分钟前
浏览器扩展与网页交流
前端
小宁爱Python35 分钟前
CSS的复合选择器
前端·css