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年前端老司机4 分钟前
什么!纯前端也能识别图片中的文案、还支持100多个国家的语言
前端·javascript·vue.js
摸鱼仙人~7 分钟前
React 性能优化实战指南:从理论到实践的完整攻略
前端·react.js·性能优化
程序员阿超的博客1 小时前
React动态渲染:如何用map循环渲染一个列表(List)
前端·react.js·前端框架
magic 2451 小时前
模拟 AJAX 提交 form 表单及请求头设置详解
前端·javascript·ajax
小小小小宇6 小时前
前端 Service Worker
前端
只喜欢赚钱的棉花没有糖6 小时前
http的缓存问题
前端·javascript·http
小小小小宇6 小时前
请求竞态问题统一封装
前端
loriloy7 小时前
前端资源帖
前端
源码超级联盟7 小时前
display的block和inline-block有什么区别
前端
GISer_Jing7 小时前
前端构建工具(Webpack\Vite\esbuild\Rspack)拆包能力深度解析
前端·webpack·node.js